IE6,IE7中li下元素都有浮动,在ie6ie7下方会产生4px间隙的问题的解决

[code]<!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>IE6/IE7中li底部4px的Bug</title>
<style type="text/css">
ul{margin:0;padding:0;list-style:none;}
.list1 li{ width:300px; overflow:hidden; background:#ccc;}
.list1 li span{ vertical-align:middle;} /用top,middle,bottom都可以/
.fl{ float:left;}
.fr{ float:right;}

</style>
</head>
<body>

<ul class="list1">
<li><span class="fl">浮动</span><span class="fr">淘宝</span></li>
<li><span class="fl">浮动</span><span class="fr">淘宝</span></li>
<li><span class="fl">浮动</span><span class="fr">淘宝</span></li>
<li><span class="fl">浮动</span><span class="fr">淘宝</span></li>
</ul>

</body>
</html>

解决方法:给li下的浮动元素加 vertical-align:middle;
此例中给span加vertical-align:middle;:
.list1 li span{ vertical-align:middle;} /用top,middle,bottom都可以/
[/code]

代码片段 1

m都可以*/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复