Some knowledge about 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。

 

13. 代码在各种浏览器下进行测试的结果如下：
14. IE6
15. 

     

16. IE8、firefox、Opera、Chrome

17. 

18.  

    通过浏览器的测试我们可以比较出：
    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来解决）：

19.  

    * html
    

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

    13. Comparing the screenshots of various browsers above, we can find that so far only IE7 and lower versions (and 360 browsers) display this page as we want. However, the padding of #content in non-IE browsers- left:50px has no effect. If you are careful enough, you may find that only the blue area of ​​IE7 and lower versions (and 360 browser) is not covered by the red area, so setting padding-left:50px; is covered by the red area, and the text is supported by the red area. On, it can also be said that non-IE browsers set the text in the blue area to padding-left:200px; by default (because the width of the red area is 200px). If we also want to set the padding to 50px in non-IE browsers, then it must be 250px to achieve the effect we want. But if you just simply set padding-left:250px;, IE7 and lower versions (and 360 browsers) will really become 250px.
        Some friends will definitely think of using _Hack to solve this problem. If they do this, IE7 will not be compatible. Therefore this method is not feasible.
        

        
        
        

        Mainly used to distinguish IE and non-IE browsers. (IE both "understand" 9)

        
        
        Although 9Hack can solve the #content text position problem in IE7 (in the above example), all IEs so far can "understand" this Hack. Therefore, IE8 is set to 250px and then set to 50px, so this Hack cannot completely solve the problem. The code is as follows:
        
        

        
        
        It means that all IE sets the left inner margin to 50px;

        
        
        
        Then my friends must have thought of setting up a Hack that only IE8 can recognize. I regret to tell you that if you understand it from a normal perspective, there is no CSSHack for IE8. But we can think about it in reverse and use the exclusion method to exclude IE8.
        
        IE8 Hack
        

        
        The red part can be regarded as a Hack of IE8, because *only IE7 and lower versions can parse this Hack, so IE8 will skip *padding-left:50px; and will not parse this code, thereby excluding versions below IE8.

        
        
        
        If the effects of IE6, IE7, and IE8 are inconsistent, how to solve it?
        
        

        Example:
        

        If the left margins of DIV elements in IE6, IE7, and IE8 are inconsistent. You can solve this problem by making the following settings:
        div
        {
        padding-left:250px; //Parse here ==>All IEs are set to 250px
        *padding-left:50px; //Parse Go here==>IE6 and IE7 are set to 50px
        _padding-left:30px; //Parse here==>IE6 is set to 30px
        }
        Note: The order must not be wrong.