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

https://www.cnblogs.com/qq313462961/p/6527184.html


一样米养百样人,尽管吃同样的食物,但还是有人健康,有人身体不适。这个个人估计和浏览器兼容问题一样,同样的HTML(HTML5)+CSS(CSS3)+JS,但是表现出的外部特征还是不能达到统一,存在瑕疵。同样的代码,有的浏览器效果显示“正常”,有的显示“不正常”。

什么是兼容问题,那么:

  • 不正常的原因是什么?(不支持标签属性or存在bug)
  • 该如何让其显示正常?

 

为什么浏览器会存在兼容问题?

  • 同一浏览器,版本越老,存在bug越多,相对于版本越新的浏览器,对新属性和标签、新特性支持越少。
  • 不同浏览器,核心技术不同,标准不同,实现方式也有差异,最终呈现出来在大众面前的效果也是会有差异。

 

处理兼容问题的思路:

1、要不要做?

  • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)。
  • 成本的角度 (有无必要做某件事)。

2、做到什么程度?

  • 让哪些浏览器支持哪些效果。

3、如何做?

 

渐进增强和优雅降级

  • 渐进增强(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 很有实践价值,值得好好看看用法。

 

用到的网站:

 

 

 

上次写的是浏览器兼容性的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中,解决方法也相同。

 

-

 

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

问题:在

 

 

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

 

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

 

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

 

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

 

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

 

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

相关文章

相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。