img标签在ie浏览器下的兼容处理

html代码片段

<ul>
 <li><a href="#"><img src="img/temp.jpg" alt="广告图片1" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="广告图片2" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="广告图片3" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="广告图片4" /></a></li>
</ul>

css代码片段

ul{width:280px}
ul li{display:block;height:57px;width:277px}

很明显地可以看到 在IE中，li的高度并非我们设定的值，而是比其要高，这是因为 img 下面多出了5px 的空白。那么出现这样的问题我们该如何解决呢？小编这里提出集中解决办法供朋友们参考。

方法一：设置 ul 的 font-size:0

ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px}

方法二：设置 img 的 margin-bottom: -5px

ul{width: 280px; font-size: 0}
ul li{display:block; height:57px;width:277px}
img{margin-bottom: -5px}

方法三：使 li 浮动，并设置 img 为块级元素

ul{ width: 280px}
ul li{float:left; display:block;height:57px;width:277px}
img{display: block}

以上3个方法都能有效的解决li标签里的img标签在ie下多出5px的问题。我们在做网页设计的时候总会遇到这样那样的荒唐问题，遇到问题了不要去一味的抱怨什么浏览器兼容差，找出问题根源，解决问题才是王道。