没有仔细的去看原因。稍微搜索了一下,找到了解决方法。哎,知道就行了,样式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加上浮动。然后再清除。加浮动这个好理解。浮动之后,就不管原来的布局了。就按照浮动流来了。但是这样觉得有些动大了。