一些不常见的浏览器兼容问题

文档

以下都是工作中不易发现的坑，可能踩进去就出不来了
* z-index:-1需合理使用，，绝对定位的情况下，加z-index:-1的元素，不会触发重排，产生缝隙。案例

• 滚动加载，append的容器里禁止使用绝对定位的伪类，因为伪类定位在appened元素之后，滚动条的位置会始终显示出它，一直触发加载条件。bug处理思路：滚动加载有问题，先排查是否条件写的不对，再看是否有定位的伪类。案例
• 拖拽窗口时,移动端导航层级错位，由于PC端时执行了.slideDown()之类的方法，改变dom元素的内联样式，移动端没有清除。
• safari中 opacity及animation等类似属性，会忽略z-index。解决方法非body父级overflow:hidden;如果不行在需要盖在它上面的元素设置transform: translateZ(120px);

css

• 禁止直接使用css3选择器和属性，有兼容问题的代码必须写hanc ,如opacity rgba() display:inline-block等，代码快捷生成--下次分享

• 选择器 first-child 和 last-child
  first-child是CSS2的内容，但是last-child就不是了，所以IE8不识别。
  推荐的做法是使用first-child，或者给最后一个元素设置一个.last的class，然后对此进行样式设置。

• 360浏览器图片放大1像素偏差

• background-size: cover //移动端可以用，PC端尽量切大图解决
  如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就OK了。

js

jq理念 wright less, do more
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

如果遇到 JSON.parse(str);若要兼容ie8须使用 eval('('+str+')');代替。

//json字符串转对象
 $.evalJSON = typeof JSON === 'object' && JSON.parse ? JSON.parse : function(str) {
    return eval('(' + str + ')');
  };
//使用
 $.evalJSON()

• .trim()去首尾空格有兼容问题，

$.trim() //推荐
$().trim() //ie8不行

• .html() ie8一下有长度限制，大小限制约2kb，换成原生.innerHTML=""即可解决 案例

• video.js ie8下UI图标控件不显示。

//配置项中
controls:false,

IE的坑

• 空的<a>标签，会导致链接失效，ie9以下会出现此bug，加背景可解决background:url(about:blank);
• input需设置line-height,ie8会跑偏
• input不要写滤镜，可能无法获取焦点
• background缩写样式属性间要有空格

.bg{background:url(../bg.jpg)repeat} //报错