整理一下我遇到的浏览器兼容问题吧-前端撸码笔记

1、在head里加<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>让ie以最高级模式渲染文档，这能解决ie各版本之间的部分兼容问题；

2、掌握一些css Hack手段，这些一搜一大把；

3、如果需要，在head里引入html5.js这个文件，搜吧，网上也有，解决低版本ie中html5标签不识别问题，当然，没特殊需求也可以选择不用html5标签。

4、ie6还是ie8版本以下浏览器来的，好像不支持css的”>”选择器，即div>span 这样的是渲染不出来的，所以也要慎重；

5、说个微信浏览器里的一个坑：不知道是个例还是普遍，之前需要给元素添加border-radius：5px与transform: matrix(1, 0, 0, 1, 0, 0);两个css属性，如果就这样加上，圆角失效，如果改成border-radius：5px;-webkit-ransform: matrix(1, 0, 0, 1, 0, 0);就没问题；如果改成transform: matrix(1.1, 0, 0, 1, 0, 0);即只要matrix里不是1,0,0,1,0,0就没问题，是不是很神奇~导致原因在此表示不知道。。。所以css3里的一些属性也要慎重使用，说不定你也会碰到很多坑。

6、这几天刚遇到的，有时候我们在手机浏览器中需要input框，但是点击输入的时候手机输入法的面板会弹出挡住input框，网上搜索，发现可以用js检测window.innerHeight这个属性来解决，因为输入法面板弹出来的时候window.innerHeight会变小，是个完美的解决方案，但是，如果把input设置为position:fixed,那么有的微信浏览器的window.innerHeigh没有变化，这也是个坑。

7、再说个JS的，360浏览器里貌似保存不了图片对象，比如有时候我们需要定义一个图片对象：

var newImg = new Image();
newImg.src = "图片路径";
if (!newImg.complete) {
    newImg.onload = function() {
       //代码
    }
}else{
  //代码
}

一般情况下，一张图片加载成功后再通过其他的事件打开的时候就不会再newImg.onload了，但是360浏览器，只要调用这个图片对象，他就会再onload一遍，浪费啊浪费；哦，对：src 属性写在onload前面的话，好像在ie低版本中会出错。

8、我又想起一个jquery的坑，因为jquery的版本也一直更新，所以很多用习惯的方法也会被遗弃，这不算兼容问题，就是遇到某个方法不能用，就考虑考虑是不是用的方法与当前引入的jq版本不一致，比如：自从jquery1.7版本以后bind()函数推荐用on()来代替；
9、说起bind，我又想起js的添加事件方法：addEventListener()，这东西也是ie8以前版本不支持；

10、说到js，难免会想到选择器，后来的querySelector系列选择方法也是ie8以下版本不能用，不光ie，其他的也一样；

11、一说兼容这丧良心的东西，多如牛毛，感觉一下好多问题都涌到嘴边我又一时整理不出不知如何说，这不我又想起了css的一个经典问题：垂直居中。。。这个不多说了，解决办法往上也有很多。。。

12、啊对了，还有input的placeholder、number等新属性。。。

先写这么多吧，想起来再补充。。。

未经允许不得转载：前端撸码笔记 » 整理一下我遇到的浏览器兼容问题吧

内容推荐