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

最新推荐文章于 2025-05-31 21:26:49 发布

spring21st

最新推荐文章于 2025-05-31 21:26:49 发布

阅读量3.5k

点赞数

分类专栏： DHTML 文章标签： ie float class xhtml html 文档

本文链接：https://blog.csdn.net/spring21st/article/details/5834887

版权

DHTML 专栏收录该内容

132 篇文章

订阅专栏

问题：

在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><style type="text/css" 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>