CSS Hack的一些知识

测试环境：Windows7
主要测试：IE6、IE7、IE8、Fire Fox3.5.6
次要测试：Chrome4.0、Opera10.10、Safari4.04、360浏览器3.1

为了能够让多个Hack在同一个例子里，现对实例页面做如下要求是：

1、左右有两个DIV分别是#menu,#content，字体颜色为白色。
2、#menu高度500px，#content高度600px。
3、#menu宽度200px，#content宽度是自适应（因为是自适应所以常用的加float的方法不能解决3pxBug）。
4、在#content中写入一段文字且与红色区域边距为50px。

7. body,div{margin:0; padding:0;}

8. div{color:#fff;}

9. #menu{width:200px; height:500px; background:#900; float:left;}

10. #content{height:600px; padding-left:50px; background:#36f;}

18. 代码在各种浏览器下进行测试的结果如下：
19. IE6
20. 

    

21. IE8、firefox、Opera、Chrome

22. 

23. 通过浏览器的测试我们可以比较出：
    1、IE6与IE7效果对比基本一致，但IE6在两个DIV中间出现了3像素的Bug，这也是非常有名的IE6 3像素Bug。注意：如果对IE6的这两个经典的Bug不熟悉的话请看这两篇文章：《3像素Bug》
    2、IE8和Fire Fox内，红色区域（#menu）盖住了蓝色的区域（#content）。
    
    提出问题：
    1、解决自适应宽度情况下的IE6 3像素Bug(注：如果宽度是一定的，只需要加上浮动float即可解决，但是在宽度自适应的情况下此方法无效)
    2、解决位置不一致（例如#content中的文字）
    
    解决方法（利用CSSHack来解决）：

24. * html
    

    IE6及更低版本的IE并不是将Html标签认定为是最外层的元素，而是认为*（其中*并不是指通用选择器）才是最外层的元素，而HTML被认为是它的子元素。另外只要第一个元素浮动第二个元素不浮动的话，就会出现3像素bug。
    因此既然只有IE6及更低版本“理解”* HTML，那么它就可以作为一种hack来解决浏览器之间的不兼容。
    修改代码如下：
    

    7. body,div{margin:0; padding:0;}

    8. div{color:#fff;}

    9. * html #menu{margin-right:-3px;}

    10. #menu{width:200px; height:500px; background:#900; float:left;}

    11. #content{height:600px; padding-left:50px; background:#36f;}

    19. 通过上面各种浏览器的截图比较可以发现到目前为止只有IE7及更低版本（以及360浏览器）显示的此页面才是我们想要的效果，然而非IE浏览器的#content的padding-left:50px无效果。如果你够细心可能发现也只有IE7及更低版本（以及360浏览器）的蓝色区域没有被红色区域所覆盖，因此设置padding-left:50px;都被红色区域覆盖了，文字被红色区域撑开，也可以说非IE浏览器中默认将蓝色区域的文字设置为padding-left:200px;了（因为红色区域的宽度是200px）。如果我们在非IE浏览器中也要设置内边距为50px，那么就得是250px才能达到我们想要的效果。但是如果只是单纯的设置padding-left:250px;的话，IE7及更低版本（以及360浏览器）就真正的变成了250px了。
        有些朋友肯定会想到使用_Hack来解决此问题,如果这么做的话IE7又不兼容了。因此此方法不可行。
        

        
        
        

        主要用于区分IE与非IE浏览器。(IE均“理解”\9)

        
        
        虽然\9Hack可以解决（上面例子）IE7中的#content文字位置的问题，但是到目前为止所有的IE均可“理解”此Hack。因此IE8设置成250px以后又被设置成了50px，因此此Hack不能彻底解决问题。代码如下：