您的位置：首页 > 其它

IE6,7下li标签的间隙

2013-11-15 11:30 183 查看

1.在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生3px的间隙。
解决办法:

　　1.给li加浮动

　　2.给li加vertical-align:top;

eg：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.list{ width:300px;margin:0;padding:0;}
.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; /* vertical-align:top; */}
.list a{float:left;}
.list span{float:right;}
/*
IE6，7下li的间隙

在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

解决办法: 1.给li加浮动
2.给li加vertical-align:top;
*/
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
</ul>
</body>
</html>

2.vertical-align属性垂直对其方式

1.可以设置行内元素的对其方式

eg：注意（span1，span2都使用vertical-align）

<style>
.box{height:200px;border:2px solid #000; text-align:center;}
.span1{ width:100px;height:200px;background:Red; display:inline-block; vertical-align:middle;}
.span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
<span class="span1"></span>
<span class="span2"></span>
</div>
</body>

2.可是清除图片下的空隙

eg：

<style>
.box{border:10px solid #000;background:red;}
img{ /*vertical-align:top;*/}
</style>
</head>
<body>
<div class="box">
<img src="img/pic.jpg" /><img src="img/pic.jpg" /><img src="img/pic.jpg" />
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航