pc端兼容性总结

2018-08-23

##pc端开发容易被忽略的点
1.各个浏览器的兼容性，重点考虑ie兼容性
2.开发过程中，尽量使用向上兼容的方式
3.不同的部分需要注意cursor的值（小手）
4.不同大小屏幕如何适应

##兼容性问题
1.ie浏览器中兼容背景渐变以及半透明背景

filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#00000000, endColorstr=#cc000000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#00000000, endColorstr=#cc000000)”;

‘#00000000’：前两位代表透明度。00 是完全透明。 FF 是完全不透明。后六位代表rgb值
2.display:inline-block在ie7以及以下浏览器失效

解决办法

display:inline-block;

*display:inline;

*zoom:1;

原因：ie和其他浏览器的表现形式上不一样，即使是inline-block触发了haslayout还是不具有inline-block不换行的特性
详解haslayout
ie8以下布局bug基本都由haslayout引起

3.ie 6 7下js报错缺少标识符字符串或数字的解决

4.overflow:hidden在ie7下失效

问题原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
解决方法：我们在IE7内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用position:relative;即可解决该bug，就是用到overflow的父节点中增加相对定位即可。

ie浏览器下使用另外的jquery版本和样式

<!--[if lte IE 8]>
<html class="ie">
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<![endif]-->