IE6 IE7 hasLayout bug之li间的3px垂直间距

1、 li中仅包含a,span等内联(行内)元素2、触发条件: li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且a或span元素被设置了display: block. (即使a或span不设置dis

症状

两个li元素之间, 多出3px的垂直间距, 即使将li的margin设置为0, 也依然存在.
二、受影响的浏览器
IE6, 7

三、出现条件(有两种)

第一种情况:
1、 li中仅包含a,span等内联(行内)元素
2、触发条件: li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且a或span元素被设置了display: block.
 (即使a或span不设置display:block,即使不是a或span等内联元素而是用p块级元素,li也同样存在1px的垂直间距)

运行以下代码,查看BUG:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ipmtea.net下午茶</title>
<style type="text/css">
div{padding:50px;background:blue;}
*{margin:0;padding:0;}
/*以上CSS是为了方便观察*/
ul {
background:yellow;
}
ul li {
background:orange;
width:500px;/*hasLayout*/
}
a,span {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>ipmtea.net下午茶</span></li>
<li><a>下午茶ipmtea.net</a></li>
</ul>
</div>
</body>
</html>

  

3、解决办法:
(1) 去掉li中触发layout的样式;
(2) 触发a元素的layout, 具体做法有以下几种:
* 显式的给a元素设置一个宽或高;
* 将display: block改为display: inline-block;
* 设置zoom: 1;

 
 
 
 
 
第二种情况:
1、 li中包含1个或多个子元素, 子元素类型不限(全为内联元素, 全为块元素或两者同时出现)
2、 触发条件:  li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且子元素全部被设置为浮动.
(在这里由于li的子元素浮动,存在清除浮动闭合浮动元素的问题,在IE下,只要容器hasLayou,则容器的范围会延伸至浮动元素所在宽高度从而闭合浮动元素,详情可阅读这篇文章《hasLayout详解》

运行以下代码,查看BUG:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ipmtea.net下午茶</title>
<style type="text/css">
div{padding:50px;background:blue;}
*{margin:0;padding:0;}
/*以上CSS是为了方便观察*/
ul {
background:yellow;
}
ul li {
background:orange;
width:500px;/*hasLayout*/
}
a,span {
float:left;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>ipmtea.net下午茶</span></li>
<li><a>下午茶ipmtea.net</a></li>
</ul>
</div>
</body>
</html>

  

3、 解决办法: 
将li设置为float.
上一篇:Y2错题解析


下一篇:linux/mac下一键删除下载失败的maven jar包