Firefox浏览器BUG:解析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,或者不知名的机制造成,出问题的代码如上,具体在火狐显示效果如下:

Firefox浏览器BUG:解析margin-top出现双边距_第1张图片

图1


Firefox浏览器BUG:解析margin-top出现双边距_第2张图片
 图2


Firefox浏览器BUG:解析margin-top出现双边距_第3张图片
 图3

    大家可以通过不断调节.bottom的margin-top值更深刻地感受一下火狐送给我们的“美味”!再在其他浏览器(如Chrome、IE)试验一下,是不是这个现象就没了呢?

    其实,这种解决这个火狐下问题的办法倒是多种多样,如通过padding、border、overflow、inline或height等方法都能解决,而且可以审时度势地采取办法,对于最终的页面效果倒是没什么影响。

    但是,我不想只知其所以然,而不知为何然。通过举出这个例子,只是想探究火狐依赖的是什么机制才这样解析的,这到底是不是火狐的BUG呢?或者说,这是火狐的亮点呢,还是缺点?

    这个问题已经困扰我好久了,查了很多资料却没有这方面的。亲爱的网友们,如有对这方面感兴趣的,知道这个问题答案的同志,还请不吝赐教!小弟敬候佳音!

 

你可能感兴趣的:(html,浏览器,firefox,火狐,margin-top)