浏览器兼容问题解决方案
百度流量研究院: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内核渲染