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

来源：互联网发布：淘宝查虚假交易时间编辑：程序博客网时间：2024/06/06 17:30

问题：

在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.csdn.net/spring21st/archive/2010/08/24/5834887.aspx