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

最新推荐文章于 2024-09-23 16:57:13 发布

原创最新推荐文章于 2024-09-23 16:57:13 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ie #float #class #xhtml #html #文档

DHTML 专栏收录该内容

132 篇文章

订阅专栏

本文解决IE6/7浏览器中li元素设置浮动后出现额外4像素边距的问题，提供三种解决方案：添加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><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>