主流浏览器兼容性问题
Posted 1锦绣未央1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了主流浏览器兼容性问题相关的知识，希望对你有一定的参考价值。
样米养百样人，尽管吃同样的食物，但还是有人健康，有人身体不适。这个个人估计和浏览器兼容问题一样，同样的html(HTML5)+CSS(CSS3)+JS，但是表现出的外部特征还是不能达到统一，存在瑕疵。同样的代码，有的浏览器效果显示“正常”，有的显示“不正常”。
什么是兼容问题，那么：
不正常的原因是什么？（不支持标签属性or存在bug）
该如何让其显示正常？
为什么浏览器会存在兼容问题？
同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
处理兼容问题的思路：
1、要不要做？
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）。
成本的角度 (有无必要做某件事)。
2、做到什么程度？
让哪些浏览器支持哪些效果。
3、如何做？
根据兼容需求选择技术框架/库(如jquery 1.x.x)。
根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss。
条件注释、CSS Hack、js 能力检测做一些修补。
渐进增强和优雅降级
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级`(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
具体方法：
IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有 IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。
<!--[if IE 6]>
<p>IE6下 这句生效，在其他浏览器下认为是普通注释</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert("在 IE 下条件语法生效，但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
使用了条件注释的页面在ie9 及以前 中可正常工作，但在ie10 以后不再支持。
CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。
.box{
color: red;
_color: blue; /*只有ie6认识*/
*color: pink; /*只有ie67认识*/
color: yellow\9; /*ie浏览器都能识别*/
}
以下是一些常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie7
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
一些兼容写法范例：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效，zoom:1触发hasLayout,起到类似BFC的效果 */
}
.target{
display: inline-block;
*display: inline; /*仅对ie67生效*/
*zoom: 1; /*仅对ie67生效*/
}
<!--[if lt IE 9]>
<script ></script>
<script ></script>
<![endif]-->
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
一些和兼容相关的工具/库：
html5shiv
Respond.js
CSS Reset
normalize.css
Modernizr.js
postcss
特别是Modernizr.js 和 postcss 很有实践价值，值得好好看看用法。
用到的网站：
浏览器市场份额 - 百度统计流量研究院
caniuse.com 查CSS属性兼容
Browserhacks 查 Hack 的写法
以上是关于主流浏览器兼容性问题的主要内容，如果未能解决你的问题，请参考以下文章