由布局学习CSS——IE6,7,8(Q)的浮动行内元素在某些情况下发生折行的bug

在做很多新闻列表的时候都需要在后面跟上一个时间，通常的做法是将时间包含在一个span里面，然后将span进行有浮动，但是在IE6，7下为出现如下的bug.

时间的那一行发生了折行，要解决这个bug,方法很简单，只需要给时间对应的span使用一个IE的Hack，即*margin-top:-n px;

原理：IE6 IE7 IE8(Q) 下，若浮动元素之前存在兄弟行内非浮动元素，IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边，导致该浮动元素折行。在W3c的文档中有关于浮动的元素和非浮动元素相邻时的表述（ 9.5 Floats），其中指到：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。看着代码来说

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css" rel="stylesheet">
        .newsList li span{
        float:right;
        }
        </style>
    
    </head>
    <body>
            <div id="Container" style="width:300px; border:1px solid gold;">
                <ul class="newsList">
                    <li><a href="#" title="topic">topic</a><span>Time</span></li>
                    <li><a href="#" title="topic">topic</a><span>Time</span></li>
                    <li><a href="#" title="topic">topic</a><span>Time</span></li>
                    <li><a href="#" title="topic">topic</a><span>Time</span></li>
                    <li><a href="#" title="topic">topic</a><span>Time</span></li>
                </ul>
            </div>
        </div>
    </body>
    
</html>

在 IE6 IE7 下，测试代码没有达到我们预计的效果，右浮动的 SPAN 折行浮动在新的一行上，同时位置也脱离了其父容器。topic 作为浮动框之前当前行的内容，应该显示在浮动框另一边的第一个可用行上。右浮动的 SPAN 紧贴在其父容器的右边界，其左侧的空白区域只要有足够的空间容纳这 个非浮动的 a 元素，它们就应该保持与右浮动的 SPAN 元素位于同一行上。 这里 IE6 IE7 以及所有版本 IE 的混杂模式的处理均是错误的。

解决方案：使用 IE hack 专门在IE6 IE7 中设置负的上外边距（margin-top:-XXXpx）。 既然此 Bug 为IE6 IE7 专有，则只需要在 IE6 IE7 下为右浮动元素设置一个负的上外边距即可，其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星号 '*'。如 *margin:-23px 5px 0 0，这样既可消除 IE6 IE7 中的 Bug，但是这么做是利用了浏览器的 Bug，并没有消除 Bug。

关于负margin的解释：对于负的margin值，其实可以分为两组来讨论，一组是垂直方向上的，一组是水平方向上的。
垂直方向上的：与该元素是否浮动无关，当设置负的margin-top时，元素向上移。当设置负的margin-bottom时，元素不产生移动，只是对应的参考线发生移动。
对应水平方向上的：以该元素是否浮动有关，在非浮动下，B/R不移动，L/T向相同方向移动|margin|。对于浮动的元素，如果margin设置的方向和float的方向相同，那么这时浮动元素发生移动。如果margin设置的方向和float的方向相反，那么这时是设计到参考线的问题，元素本身不移动。

 



posted @ 2012-03-28 20:03  shawnXiao  Views(1849)  Comments(2)  Edit  收藏  举报