li标签的间距问题及编码⽅式
新建⼀个简单的HTML测试⽂件，下⾯来测试ul li标签
Example Source Code
<ul>
<li><a href=”#”>菜单⼀</a></li>
<li><a href=”#”>菜单⼀</a></li>
<li><a href=”#”>菜单⼀</a></li>
<li><a href=”#”>菜单⼀</a></li>
<li><a href=”#”>菜单⼀</a></li>
html ul标签
<li><a href=”#”>菜单⼀</a></li>
</ul>
测试⼀，定义css为如下代码，效果如下
Example Source Code
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;width:120px;}
ul li{background:green;height:20px;}
ul li a{color:#fff;padding:0 0 0 10px;}
发现在IE5和IE5.5下左边都产⽣了空⽩，并且在IE5下，LI之间的⾏距产⽣空⽩，如下图1
测试⼆，定义css为如下代码，
Example Source Code
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;}
ul li a{color:#fff;padding:0 0 0 10px;}
和测试⼀相⽐，只是将width:120px；从ul的定义放置到li的定义，解决了IE5和IE5.5左边产⽣空⽩的问题，⽽IE5的li之间的间距还是有，如下图2
测试三，定义css为如下代码，(最佳写法)
Example Source Code
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
ul li a{color:#fff;padding:0 0 0 10px;}
和测试⼆⽐较，在li的定义中加上vertical-align: bottom;ie5下正常，li之间的空⽩⾏距消失了，取得各个浏览器的效果⼀样，如下图3
总结
1.解决li在IE5下产⽣空⽩⾏距的⽅法：如果li定义了宽度，那么需要在li⾥⾯再定义vertical-align: bottom;
2.宽度最好不要定义在UL，定义在LI或者UL外层的DIV⾥⾯
3. 书写LI的最佳⽅式，li⾥⾯要书写⾼度和宽度，以及vertical-align: bottom;（for ie5/win bug），或者在ul外⾯加上⼀层div，并定义宽度，那么在li⾥⾯不⽤定义宽度和vertical-align: bottom;，也显⽰正常(IE5下不会产⽣空⽩⾏距)，不过⾼度还是要定义⼀下的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。