li元素的行间距问题

<style type="text/css">

ul{list-style:none;}

.xh_li{border:1px solid red;200px;padding:10px;}

</style>

<ul>

<li class="xh_li"><img src="**.jpg" alt=""/></li>

<li class="xh_li"><img src="**.jpg" alt=""/></li>

</ul>


这里面有两个问题:


1.IE6:li与li之间有3像素的间距,li元素将图片当成文本来处理了(利用这个属性可以解决图片垂直居中问题),必须把font-size:0;才能解决(其它浏览器中不会出现此现象)

2.非IE6浏览器(FF,IE8,IE7,谷歌,opear浏览器):img元素底部到li的间距要比其它三个方向要大(>5),是因为li有行间距,将行间距设为0,四个方向就间距就是5了(IE6中不会出现此现象)

原文地址:https://www.cnblogs.com/xiaohui108/p/1917664.html