PC端浏览器常见兼容问题及解决方案

PC端浏览器常见兼容问题及解决方案

一、IE6的特殊样式

1.IE6块级元素设置float之后，设置的横向margin样式margin加倍

debug:
将该块级元素设置样式  display:inline

2.IE6默认有行高

debug:
overflow:hidden;或者font-size:0;或者设置行高

3.IE6中如果为li设置宽高，且li内部元素设置float，li之间会有间距

debug:
事实上我们主张在li里加入div这样的元素，但如果您真的要这么做，那么解决这个bug需要
不给li设置宽高或者将内部的float使用display:inline代替。

4.IE6下z-index失效

产生原因:
父标签position:relative或者问题标签含有float

debug:
设置子标签的z-index还要设置父标签的z-index从而确定层级关系

5.IE6中图片产生间隙

debug:
为img标签设置display:block

6.png24位的图片在IE6上出现背景

debug:
改为png8

二、各个版本的hack

/*类内部hack：*/
.header {_width:100px;}            /* IE6专用*/
.header {*+width:100px;}        /* IE7专用*/
.header {*width:100px;}            /* IE6、IE7共用*/
.header {width:100px\0;}        /* IE8、IE9共用*/
.header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;}    /* IE9专用*/

/*选择器Hack：*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/