<!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呢?或者说,这是火狐的亮点呢,还是缺点?
这个问题已经困扰我好久了,查了很多资料却没有这方面的。亲爱的网友们,如有对这方面感兴趣的,知道这个问题答案的同志,还请不吝赐教!小弟敬候佳音!