ie6/7下 li内浮动元素下边距4像素bug解决方案

最新推荐文章于 2025-12-31 14:00:00 发布

转载最新推荐文章于 2025-12-31 14:00:00 发布 · 3k 阅读

文章标签：

本文介绍了在IE6/7浏览器中，当使用浮动布局时，可能会导致li元素下边距多出四个像素的问题，并提供了三个解决方案：添加vertical-align属性、去除样式属性、以及使用clearfix技巧。示例代码详细展示了如何应用这些方法来解决问题。

问题：

在IE6/7 下，如果给li的元素有浮动，则会造成li下边距多出四个像素的问题，如图所示：

解决方案：
1、给li添加：vertical-align属性，除baseline的任意值
2、去掉高、宽、margin、padding、zoom等属性（但适用性不是太好）
3、li添加float属性，li浮动时里面的浮动元素也无需再清楚浮动

示例代码：

<!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>无标题文档</title> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> ul { width:300px; list-style:none;} li { padding-bottom:10px; width:300px; vertical-align:top;} li.li_odd{ background-color:#efefef;} li.li_even{ background-color:#cfcfcf;} span { float:left; width:100px; background-color:#06C; font-family:宋体；} .clearfix { zoom:1;} .clearfix:after { display:block; float:none; clear:both; content:""; font-size:0; height:0;}</style> </head> <body> <ul> <li class="li_odd clearfix">中华人民共和国中华人民共和国中华人民共和国中华人民共和国23</li> <li class="li_even clearfix">12中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</li> <li class="li_odd clearfix">123</li> </ul> </body> </html>

转帖自：http://blog.youkuaiyun.com/spring21st/archive/2010/08/24/5834887.aspx