Firefox浏览器BUG：解析margin-top出现双边距 -

koolC

浏览: 19141 次
性别:
来自: 沈阳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Firefox浏览器BUG：解析margin-top出现双边距

html 浏览器火狐 firefox margin-top

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>火狐浏览器的怪癖</title>
        <style>
            *{ margin:0; padding:0; }
            body{ font:12px/1.5 tahoma,arial,\5b8b\4f53; border: 1px dotted red; }
            .clearfix:after{ clear:both; content:''; display:block; height:0; }/* 如果设置overflow:auto/hidden,该现象消失 */
            .clearfix{ zoom:1; }/* 如果设置overflow:auto/hidden...(非visible),该现象消失 */
            ul li{ float:left; margin-right:30px; }
            .box{ margin:auto; width:900px; }
            .bottom{ margin-top:100px; }
        </style>
    </head>
    <body>
        <div class="box"><!-- 不要给box设置border/padding，否则这种现象就不会出现了 -->
            <ul class="clearfix"><!-- 块状元素 -->
                <li><!-- 设置浮动 -->
                    WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
                </li>
                <li><!-- 设置浮动 -->
                    QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
                </li>
            </ul>
            <div class="bottom"><!-- 调节bottom的margin-top值，你会很容易发现这种现象 -->
                PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
            </div>
        </div>
    </body>
</html>

最近，我在做网页时发现一个唯独在火狐（在IE6~9、Firefox、Chrome下均测过）下出现的怪问题——垂直margin双倍外边距问题。注意这不是大家常谈的margin-top失效问题（即collapsing margins，margin折叠/合并问题），我想这应该算是火狐的一个BUG，或者不知名的机制造成，出问题的代码如上，具体在火狐显示效果如下：