ie6-7下的li内有浮动元素后导致多出了4px的高度的bug

没有仔细的去看原因。稍微搜索了一下，找到了解决方法。哎，知道就行了，样式bug这个东西，深入研究也研究不出啥来。记住就行了

<style type="text/css">

body{margin:0,padding:0;}

ul{height:56px;background:#f1f;}

li{overflow:hidden;list-style:none;height:28px;width:100px;background:#22f;}

div{height:28px;float:left;}

</style>

    





<ul>

    <li class="l1"><div></div></li>

    <li></li>

</ul>

代码如上。

简单的ul，li。现在第一个li里放一个div，然后浮动一下div，li之间就有间隔了。
ie8兼容模式以及ie7的情况是li之间多了条空隙。这样li就超出ul了
ie6的情况是，li中间多了条空隙，但是li的高度也同时变小了，然后总li还是在ul里面

 

具体原因未知；解决办法，
1 给li加上 vertical-algin:middle;
2 或者给li加上浮动。然后再清除。加浮动这个好理解。浮动之后，就不管原来的布局了。就按照浮动流来了。但是这样觉得有些动大了。