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或者问题标签含有floatdebug:设置子标签的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*/