IE6 | IE7 li底部多出几像素bug

IE6 | IE7 li底部多出几像素bug

作者: admin 日期: 一月 18, 2012 发表评论 (0) 查看评论

先看2个截图

IE6、IE7

chrome：

图示代码地址：http://jsfiddle.net/baofen14787/tH4YL/1/

会发现在IE6–7下，LI底部会多出几个像素，网上很多人说这是li的3pxbug，实际不然。底部的空隙和字体大小和高度有关。并不一定是3px。

出现这个bug的条件如下
必要条件：
li的子元素设置了浮动（例如：本例中的span设置了左浮动）

充要条件：
(IE6/7)li设置了width、height、zoom 之一 （例如：本文中的li设置了width）

解决方案也很简单：

1、别让li获得layout
2、设置li {vertical-align：middle} （推荐这种方法，简单方便）
3、设置li {font-size:0} li span{font-size:12px}。
4、设置li{float:left;width:100%}
…
还有其他方法就不一一说了。

其他解决方案也有

(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一