IE中img多出5px的空白解决4种方法

名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。

本篇文章具体介绍如下

li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例

<ul>
<li><ahref="#"><imgsrc="temp.jpg"/></a></li>
<li><ahref="#"><imgsrc="temp.jpg"/></a></li>
<li><ahref="#"><imgsrc="temp.jpg"/></a></li>
<li><ahref="#"><imgsrc="temp.jpg"/></a></li>
</ul>
ul{width: 280px;}
ul li{display:block;height:57px;}
<ul>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
</ul>

ul{width: 280px;} ul li{display:block;height:57px;} 其中 temp.jpg 尺寸为 277×57 Firefox 下的正常表现，IE6 下的非正常表现。很明显地可以看到 IE 中，li 的表现高度，并非我们设定的 57px，而是比其要高，这是因为 img 下面多出了 5px 的空白。解决方法一使 li 浮动，并设置 img 为块级元素

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

解决方法二设置 ul 的 font-size:0;

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

解决方法三设置 img 的 vertical-align: bottom;

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

解决方法四设置 img 的 margin-bottom: -5px;

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

手机网站建设和开发要注意的事项
我们现在手机的那个开发的速度越来越快了，手机具备了很多以前不具备的功能，同时手机能做的事情也越来越多了，电脑能做的事情很多手机都能做了，所以在浏览网站的时候用户都会将浏览网站的硬件从电脑转为手机，所以手机网站的建设对于我们目前的一个发展趋势来说是应该关注和关心的。在做手机网站的建设和开发当中，我们需要注意一些和在做电脑网站开发的不一样的点。

好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,IE,中,img,多出,5px,的,空白,解决,4种,方法,