博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

li内元素float后，ie下自动增加Xpx的下边距

Posted on 2011-11-08 09:46  southy  阅读(209)  评论(0)    收藏  举报 
<!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=gb2312" />
<title>LI 4PX</title>
<style>
ul{margin:0;padding:0;}
li{list-style-type:none;margin:0;padding:0; height:30px; width:900px;}
span{ float:left}
</style>
</head>
<body>
<ul>
  <li style="background:#FF0000"><span></span><span></span></li>
  <li style="background:#FF00FF"><span></span><span></span></li>
  <li style="background:#FF0000"><span></span><span></span></li>
  <li style="background:#FF00FF"><span></span><span></span></li>
  <li style="background:#FF0000"><span></span><span></span></li>
  <li style="background:#FF00FF"><span></span><span></span></li>
</ul>
</body>
</html>

 

例,在IE下，会出现1个4px的下边距。

解决办法1：
margin-bottom:4px;/****兼容FF***/
*margin-bottom:-4px;/****兼容IE6+IE7***/
但，用 margin-bottom 是不安全的，因为这个间隙是跟字体相关的，如果你改变了字号或字体，这个间隙也会变化。所以正确的思路还是要避开浏览器 bug，让这个间隙不出现。

解决办法2：
在浮动元素里加vertical-align: top
但，这个貌似在IE6下不起作用，IE7是没有问题。

解决办法3：
给UL 和 LI都加上浮动。
测试，IE6、7都正常。

 

原文出自：http://www.southy.cn/article.asp?id=63