<!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,或者不知名的机制造成,出问题的代码如上,具体在火狐显示效果如下:
图1
?图2
?图3
??? 大家可以通过不断调节.bottom的margin-top值更深刻地感受一下火狐送给我们的“美味”!再在其他浏览器(如Chrome、IE)试验一下,是不是这个现象就没了呢?
??? 其实,这种解决这个火狐下问题的办法倒是多种多样,如通过padding、border、overflow、inline或height等方法都能解决,而且可以审时度势地采取办法,对于最终的页面效果倒是没什么影响。
??? 但是,我不想只知其所以然,而不知为何然。通过举出这个例子,只是想探究火狐依赖的是什么机制才这样解析的,这到底是不是火狐的BUG呢?或者说,这是火狐的亮点呢,还是缺点?
??? 这个问题已经困扰我好久了,查了很多资料却没有这方面的。亲爱的网友们,如有对这方面感兴趣的,知道这个问题答案的同志,还请不吝赐教!小弟敬候佳音!
?
1 楼
koolC
2012-02-20
javaEEdevelop 写道
什么firefox version啊,把你html代码发过来瞧瞧啊,
代码在这篇blog上,火狐常用版本都可以,只要不是特别特别低的就行~~~
2 楼
beowulf2005
2012-02-20
.box{ margin:auto; width:900px; }
auto的问题, 把 auto改成0试下
auto的问题, 把 auto改成0试下