浏览器兼容性

时间：2017-02-07 22:45:03 阅读：334 评论：0 收藏：0 [点我收藏+]

以前开发过的两个项目都是内部系统，强制要求使用chrome浏览器，不过在验收的时候甲方还是用猎豹测试了一下，果然功能都不对了。现在再次拾起了前端，还是研究一下浏览器兼容性。本文一部分是个人的经验，大部分还是借鉴的前辈。

首先声明我是新手，下面的内容一点也不权威，如果写错了请大家用各种方式指教。

主流浏览器包括IE6+(我可以说IE6已经下岗了吗)，Chrome,Safari,Opara,FireFox，后四种浏览器又各自有不同的版本。

浏览器兼容问题我总结为了4种：

一、编码不规范

举个我遇到的例子，Date()函数的参数是有格式要求的，一共有五种格式可选，然而有些浏览器，比如Chrome可以识别其他的格式的入参格式，但是当你在其他浏览器运行时，就会出现不可预计的错误。这个平时就要多看标准，多查手册，多进坑，多踩雷。

二、浏览器差异，相同的功能不同的实现

最典型的事件event要写成event = event || window.event。这种东西也是靠经验积累吧。如果没遇到过根本不明白为什么别人的代码要写成那个样子。

类似的还有不同浏览器对一些标签的初始样式设定不一致，可以通过设置reset.css对所有标签样式自己初始化一遍

三、浏览器兼容性问题，很多功能不支持

尤其对于很早的浏览器IE6，IE7，一些新的功能和属性都不支持。CSS3，HTML5，ES6一般都介绍了自己的浏览器兼容性，在写代码之前都可以查一查，HBuilder就自带了这个功能（不支持ES6）。在不兼容时怎么办：1、可以寻找有类似功能的替代方案，比如css的清除浮动，IE不支持伪类，所以单独设置zoom:1,还可以通过使用polyfill，给浏览器实现这些功能。2、放弃那些新的技术，使用兼容性好的技术，不过估计很少有人会这么选。3、为低级浏览器单独实现一套代码，增加工作量，但是很简单4、抛弃低级浏览器

还有就是在一些css属性成为标准之前，有些浏览器就实现了它，但是需要加入前缀。通过加入前缀的方法，可以使一些属性的兼容性提升不少。（通过sass可以很容易实现自动添加前缀）

四、浏览器Bug

一些常见的bug很容易搜到，一个有限集合，都记住就好了。对应的解决方案也都可以查到。

写再多理论也还是要实践的，把上一篇文章代码在IE下跑了一下，全都不对。一步一步的修改一下：

1、我用到了一些es6的语法，全都改回去let 变var(使用ES6语法的时候可以使用babel编译为ES5的语法)

2、IE下文字乱码，原谅我好久不写了，犯了低级错误，加上 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

3、hover没效果，断点跟踪发现时currentTarget的问题，查了一下，为了兼容IE和FireFox，要写成event.target || event.srcElement

4、IE11下三角显示错误，IE不支持after伪类，在div内手动声明一个子元素，并制作成和气泡背景色一致的三角，把边框的dashed改为solid

5、气泡的上下箭头不能反过来，setAttribute的兼容性问题，改为直接访问className

6、IE下，出现滚动条后气泡出现位置不对，因为获取滚动条偏移量的方法不对，改为scrollTop = document.body.scrollTop===0?document.documentElement.scrollTop:document.body.scrollTop;

至此，之前的页面可以在IE8，IE11，chrome下正常运行，贴一下代码

<!DOCTYPE html>
<html>
  <head>
    <title>test2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .base{
      width:150px;
      height:150px;
      border:2px solid black;
      margin-top:100px;
      margin-left:100px;
    }
    .pop{
      width:200px;
      height:100px;
      border:2px solid grey;
      border-radius: 2px;
      box-shadow: 2px 2px 2px grey;
      position:fixed;
      display:none;
      background-color:white;
    }
    .triangle-bottom{
      width:0;
      height:0;
      border-top:20px solid grey;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      position:absolute;
      left:90px;
      top:100px;
    }
    .triangle-bottom .after{
      content:‘‘;
      width:0;
      height:0;
      border-top:18px solid white;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      position:absolute;
      left:-8px;
      top:-20px;
    }
    .triangle-top{
      width:0;
      height:0;
      border-bottom:20px solid grey;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      position:absolute;
      left:90px;
      bottom:100px;
    }
    .triangle-top .after{
      content:‘‘;
      width:0;
      height:0;
      border-bottom:18px solid white;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      position:absolute;
      left:-8px;
      bottom:-20px;
    }
    </style>
  </head>
  <body>
    <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
        鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>
      <div onmouseover="show()" onmouseout="hiden()" class=‘base‘ name=‘base‘>
      鼠标放我上面出气泡
    </div>

    <div class=‘pop‘ id=‘pop‘>
      <div id=‘triangle‘ class=‘triangle-bottom‘><div class=‘after‘></div></div>
    </div>
  </body>
  <script type="text/javascript">
      function show(event){
      event=event||window.event;
          var pop=document.getElementById(‘pop‘);
      var x=0,y=0;
      var target = event.target||event.srcElement;
      var scrollTop = document.body.scrollTop===0?document.documentElement.scrollTop:document.body.scrollTop;
      while(target.offsetParent!==null){
        x+=target.offsetTop;
        y+=target.offsetLeft;
        target=target.offsetParent;
      }

      pop.style.display=‘block‘;
      pop.style.left=y-25+‘px‘;
      if(x-100-100<scrollTop){
        document.getElementById(‘triangle‘).className=‘triangle-top‘;
        pop.style.top=x+150-scrollTop+‘px‘;
      }else{
        document.getElementById(‘triangle‘).className=‘triangle-bottom‘;
        pop.style.top=x-100-scrollTop+‘px‘;
      }
      }

    function hiden(){
      var pop=document.getElementById(‘pop‘);
      pop.style.display=‘none‘;
    }

    document.getElementsByName(‘base‘);
    function aaa(){
      alert(‘123‘);
    }


  </script>
</html>

不得不说，仅仅实现了这样简单的一个页面就出现了这么多兼容性问题，不过大部分问题都是我经验太少，编码不规范导致。浏览器的兼容性果然不是靠看几篇文章就能速成的，必须要靠一点一点的调试积累经验。

在后续遇到兼容性问题时，我会补充在下面：

浏览器兼容性

原文：http://www.cnblogs.com/lichliu/p/6376106.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)