IE6浮动多余3pxBug及多类选择符Bug_为什么浮动之后会多了3px-CSDN博客

本文链接：https://blog.csdn.net/nx8823520/article/details/7168641

最近刚刚忙完了，碰到了2个很好玩但是个人却一直没注意的问题，这2个问题都是出现在IE6中虽说微软明年“可能"决定彻底废除IE6，不过就像你们所看到的，这个只是个可能或许只是个传言，对此我们却不能不考虑这些IE6的用户，如下看段代码：

<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            body,img,div,a{ margin:0; padding:0; }
            img {border:none;border-radius:4px; }
            
            
            body {background:#000; }
            #box {margin:20px auto;
                padding:2px;
                width:224px;
                border-radius:5px;
                background:#fff;
                overflow:hidden; *zoom:1;white-space:nowrap;
            }
                #box div {
                    float:left;
                    width:168px; height:156px;
                    overflow:hidden;
                }
                #box a {
                    float:left;
                    width:56px; height:54px;
                    text-align:center;
                    
                }
                    #box a img {
                        display:block;
                        width:50px; height:50px;
                        border:2px solid #ddd;
                    }
                    #box a:hover { position:relative; }
                    #box a:hover img { border-color:#f59701; }
            
        </style>
        
        <script>
            
        </script>        
    </head>
    <body>
        <div id="box">
            <div id="div">1</div>
            <a href="javascript:"><img src="images/small_1.jpg" /></a>
            <a href="javascript:"><img src="images/small_2.jpg" /></a>
            <a href="javascript:"><img src="images/small_3.jpg" /></a>
            <a href="javascript:"><img src="images/small_4.jpg" /></a>
            <a href="javascript:"><img src="images/small_5.jpg" /></a>
            <a href="javascript:"><img src="images/small_6.jpg" /></a>
            <a href="javascript:"><img src="images/small_7.jpg" /></a>
            <a href="javascript:"><img src="images/small_8.jpg" /></a>
            <a href="javascript:"><img src="images/small_9.jpg" /></a>
            <a href="javascript:"><img src="images/small_10.jpg" /></a>
            <a href="javascript:"><img src="images/small_11.jpg" /></a>
            <!--<a style="height:0;width:0;text-indent:-9999px;" href="javascript:"></a>-->
            <!--<span style="clear:both"></span>-->
            <!--<a href="javascript:"><img src="images/small_11.jpg" /></a>-->
            <!--这里注释的是三种解决方案-->
        </div>
    </body>
</html>

在这段代码中最外围的父级宽度是224px，里面的内容a宽度是56px刚好分3排显示一排4个（4*56=224）,但是在ie6中会发现最后的一排有2个a不听话的另起炉灶了，对此开始的时候我百思不得其解，后来看到别人说是 IE6 幽灵文本(Ghost Text bug，PS：就是经常的碰到的在IE6中会多出重复文字的BUG。)，但是对比此事例却不太像，抱着试试的想法，我删除了所有a里面的换行，发现居然真OK了，这样的话那是不是浮动引起的呢？虽然这个例子我们用了 "overflow:hidden;zoom:1"去“清除”了浮动，不过真的清除了吗？我在最后个a后面加了个 <span style="clear:both;"></span>果然问题也没了，我想或许我们最习以为常的清除浮动方法仅仅只是渲染了这样一个表象吧，对应这些顽固浏览器它们却有着自己的一套解析方式，于是乎出现了这样的bug。当然对于这个bug解决方法我看到个很有意思的就是在最后不是加清除浮动而是加一个 <a style="height:0;width:0;text-indent:-1000px;"></a> 空的a,这个也能解决问题不过原理我想利用IE6的解析方式多出的空格跟着元素吧，当然也是猜想，有兴趣的可以试试在多加1个有内容的a也会正常展示“ <a href="javascript:"><img src="images/small_10.jpg" /></a>”；好了它该告一段落了，这个问题的来源是： http://topic.csdn.net/u/20111224/15/ddd337b4-b9ac-45d2-9045-fcf81d2aa6ec.html?67723

然后看第二个BUG，多类选择符，这个名词可能很多人看的一愣，呵呵其实吧，这个叫法也是我随口叫的或许应该叫交集选择符，大家可能都很熟悉.class1 .class2这样的选择符，匹配class1下的class3的元素，但是如果中间去掉空格.class1.class2很多人估计都会说你写错了，少写空格了，呵呵就和我第一次接触一样。这样没空格的匹配的<div class="class1 class2">这样一个元素，这样的写法IE6是不支持的（如果不加<!doctype html也不会给识别），在IE6中.class1.class2的写法会只会影响所有的.class2的元素，对于前面的.class1会忽略，对此个人还犯了个效果，由于以前这样的定义比较少，而这样定义了的类class2都是特殊类，所以在ie6中也没看到问题，就坚持的认为ie6的支持的，这里真心的感谢下"ootwo"的执着和“转牛角尖”。对于这个bug我觉得最好的解决办法是改变结构，毕竟用户是上帝，当然如果情况单一的话利用IE6的这个特性 .paremt .class2.class1这样倒序的写同时提高它的优先级也可以的！好了收笔该忙了！

问题来源：http://topic.csdn.net/u/20111224/15/ddd337b4-b9ac-45d2-9045-fcf81d2aa6ec.html?67723