在IE下CSS li标记产生间距及解决方法 [ 网站地图 ]

发表于:2009-12-15 浏览:185 作者: 来源:互联网

关键字:CSS li标记,解决方法

描述:当li元素设置了高度,且li内元素浮动时会触发该bug。 <style>li{background-color:green;height:20px;}lia{float:left;}lispan{float:right;}</style><ul><li><ahref="">a

当li元素设置了高度,且li内元素浮动时会触发该bug。

<style>
li{ background-color: green; height: 20px; }
li a { float: left; }
li span { float: right; }
</style>
<ul>
<li><a href="">aaa</a><span>bbb</span></li>
<li><a href="">aaa</a><span>bbb</span></li>
</ul>
解决方法:li设置css vertical-align: bottom;

<style>
li{ background-color: green; height: 20px; vertical-align: bottom; }
li a { float: left; }
li span { float: right; }
</style>
<ul>
<li><a href="">aaa</a><span>bbb</span></li>
<li><a href="">aaa</a><span>bbb</span></li>
</ul>

上边的方法一般都会解决问题,但是许多时候许多未知的原因,还会导致间距问题的出现。试试以下方法:
1.定义行高 line-height
2.设置隐藏 overflow:hidden
3.li增加浮动属性 float


站长资讯网 做中国最丰富的资讯网站 沪ICP备05004089号