解决IE下的li中img多余4px的问题--IE6有的问题

为了对比明显，这里用img标签占位，但是背景用纯黑色

<ul>
    <li>
	<img src="" alt="" /></li>
    <li>
	<img src="" alt="" /></li>
    <li>
	<img src="" alt="" /></li>
    <li>
	<img src="" alt="" /></li>
</ul>

// css样式
ul {
	width: 280px;
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
	height:80px;
	width:150px;
}
img {
	width: 50px;
	height: 80px;
        background: black;
}

明显的有4px的间距

解决办法：

1. 使 li 浮动，并设置 img 为块级元素
   
   
   
   

2. 设置 ul 的 font-size:0;
   
   
   
   

3. 设置 img 的 vertical-align:“top，text-top，bottom，text-bottom”。【对所有浏览器有效果】
   
   

4. 设置 img 的 margin-bottom: -4px;这个对chrome有效 但是有的论坛说直接给img加hack img{*margin-bottom:-4px;} 但是这个hack在chrome下，不会被解析。
   
   

最佳的设置是-- 3.设置垂直对齐

以上都是经过浏览器测试的