现在的位置: 首页 > 综合 > 正文

IE7下li Bug

2018年02月06日 ⁄ 综合 ⁄ 共 406字 ⁄ 字号 评论关闭

先前一直没有遇到这个问题,今天居然给碰上了~~~





会发现在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 之一

【上篇】
【下篇】

抱歉!评论已关闭.