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

最新推荐文章于 2021-08-05 12:10:16 发布

转载最新推荐文章于 2021-08-05 12:10:16 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lunalord/archive/2012/05/23/2515155.html

本文介绍了一个关于 IE 中 ul 和 li 元素在使用浮动时出现的间距 BUG，并提供了两种解决方案：一是为 li 元素设置 vertical-align:middle 属性；二是为 li 元素添加浮动并进行清除。

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

转载于:https://www.cnblogs.com/lunalord/archive/2012/05/23/2515155.html