您的位置：首页 > 其它

IE6|IE7中li底部3px间距BUG

2015-04-11 14:04 363 查看

<!DOCTYPE HTML>
<html>
<head>
<title>IE67li底部3pxBUG </title>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
li{border:1px solid gray;overflow:hidden;width:120px;}
li span{float:left;}
</style>
</head>

<body>
<ul id=”list”>
<li><span>张三</span></li>
<li><span>李四</span></li>
<li><span>王老五</span></li>
<li><span>刘盲六</span></li>
</ul>
</body>
</html>

截图：

以下是引发此BUG的条件：

必要条件：
li的子元素设置了浮动（例如：本例中的span设置了左浮动）

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

解决方案：

方案一
#list li设置clear:left|both，这时#list li不能设置width、height、zoom。
方案二
#list li设置float:left，这时#list li可以设置width、height、zoom。
#list li设置clear:left|both，这时#list li不能设置width、height、zoom。
方案三
给li中的span设置vertical-align:top|middle|bottom

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航