各主流浏览器之间的兼容性-JS篇

一样米养百样人，尽管吃同样的食物，但还是有人健康，有人身体不适。这个个人估计和浏览器兼容问题一样，同样的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 src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></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]-->

一些和兼容相关的工具/库：

特别是Modernizr.js 和 postcss 很有实践价值，值得好好看看用法。

用到的网站：

各主流浏览器之间的兼容性-JS篇

上次写的是浏览器兼容性的CSS篇，也还没有写全，不过现在还是先把JS篇也补上再说。

浏览器兼容问题一：获取非行间样式currentStyle/getComputerStyle。

问题：currentStyle,只兼容IE，在其他浏览器是不能用的。

解决方案：同时使用getComputedStyle，可以兼容Chrome、FF。

浏览器兼容问题二：不同浏览器的标签默认的外补丁和内补丁不同

问题：下面是IE7以下不能兼容：

for (var i = 0; i < aImg.length; i++) {
     aImg[i].src = 'img/' + str[i] + '.png';
}

解决方案：换为下面方法：

for (var i = 0; i < aImg.length; i++) {
      aImg[i].src = 'img/' + str.charAt(i) + '.png';
}

浏览器兼容问题一：不同浏览器对DOM的支持程度

IE9对DOM支持兼容好很多，但是还是很多坑。FF对DOM支持在99%以上，就是每次启动太慢。Chrome对DOM支持比FF差，但是比IE好太多。

问题：在IE6-8中，对childNodes支持还是挺好的，相反其他浏览器会把文本节点和元素节点混淆，可用nodeType来鉴别。

HTML:

<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JS:

var oul = document.getElementById('ul1');
alert(oul.childNodes.length);

此时的弹出框就会显示‘11’，比我们想要的‘5’，多出‘6’。

另外上面使用childNodes会出现问题，可用children来代替，只会出现我们想要的元素节点，不会出现兼容问题，所以上面因childNodes可以改为children：

var oul = document.getElementById('ul1');
alert(oul.children.length);

此时弹出框显示的数字为‘5’，就是我们想要的结果。

children会只显示子节点。

问题：firstChild只能在IE6-8兼容，在高版本浏览器中只能用firstElementChild。

HTML:

<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

JS:

var oUl=document.getElementById('ul1');
    
//IE6-8
oUl.firstChild.style.background='red';

此时只在IE6-8中li背景才会变色，在高级浏览器中没有变化，当换为firstElementChild时：

var oUl=document.getElementById('ul1');
    
//高级浏览器
oUl.firstElementChild.style.background='red';

此时在高级浏览器中li背景会变为红色。

解决方法：

var oUl=document.getElementById('ul1');
    
if(oUl.firstElementChild){
    oUl.firstElementChild.style.background='red';
}else{
    oUl.firstChild.style.background='red';
}

此时无论IE或者chrome、FF都可以得到想要的结果。

PS：相同的兼容问题还存在lastChild、nextSibling、previousSibling中，解决方法也相同。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题：在

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

秒客网

各主流浏览器之间的兼容性-JS篇

相关文章