IE 浮动的 BUG 最著名的是左边 margin 变大的问题,请参见 IE 浮动边界 BUG 延伸探讨,还有 ul 的 margin-left 问题,请参见 ul 浮动之后 margin-left 变大的问题(不是双倍 margin 问题)。
本文要讲的另一种情况。
CSS 代码
li{float:left;background-color:#099;}
#c{clear:both;background-color:#099;}
HTML 代码
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
<div id="c">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
Chrome 中,效果如下:
看起来正常,再看看 IE 6 中的:
真让人头痛,要解决 IE 6 的问题有两种办法:
- 法一、在 </ul> 之后加一 <br />
- 法二、增加样式表:ul{zoom:1;margin:0px;padding:0px 0px 0px 20px;}