li的多余空白

在IE6下,li标签中有浮动元素的话,就有可能在两个li之间出现一条多余的空白。

CSS:

ul li
{
    width: 300px;
    height: 50px;
}
ul li div
{
    width: 30px;
    height: 50px;
    float: left;
}

HTML:

<ul>
    <li>
        <div>123</div>
        <div>456</div>
    </li>
    <li>456</li>
</ul>

解决的办法:

  1. 在任意一个div上加个vertical-align: top
  2. 让li浮动并清除浮动

发表评论