浏览器兼容问题解决方案

浏览器兼容问题解决方案

百度流量研究院：Chrome 42%，IE 8.0 12.5%，IE 9.0 9%。大部分HTML5和CSS3在IE9以前的浏览器兼容性都有问题，要强调优雅降级和渐进增强，CSS3属性部分兼容9+，部分10+，在CSS一章提及

1. IE6-兼容问题

1）png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8

2）块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大，解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3）IE6中CSS方法解决PNG图片半透明问题：filter

4）IE6调整窗口大小的bug：当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素就会固定不动了，解决方法是给body定义position:relative

5）文字大小和行高不兼容：同样大小的相同字体，各浏览器下行高和大小不一样，需要设定line-height。

2. IE8-兼容问题

1）ie8支持:first-child,但不支持:last-child

2）父元素的左padding会和子元素的左margin重叠

3）input设置了左右padding，but输入较多内容时padding还是会消失，解决方法是在input 外面套一层div，用div设置左右padding，border，width和height，input只需要设置width和weight为100%

4）sprite图中的icons之间最好留空白间隔，哪怕间隔1px也好，否则ie8下会出现使用了某一个icon当背景，icon后面跟着的其他icon也顺带显示了一小部分的bug，所以icons之间还是要适当留白，不要太省

3. IE9-兼容问题

1）input 设置了 line-height不起效，要同时设置height

2）placeholder IE9不兼容

3）console.log在IE9下无控制台时会中断脚本运行

4. IE通用兼容

1）IE表单自带的叉叉 input::-ms-clear, ::-ms-reveal{display: none;}

2）checkbox双击属性有延迟

3）“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

4）（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

5. webkit兼容

1）Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

6. 其他浏览器问题

1）CSS属性私有前缀

2）对于360双核浏览器，据添加以下头部meta信息可以使得网页用webkit内核渲染