互联网应用服务提供商!    全国售前咨询:010-69632027/13241022177怀柔巨优网络
网站备案免费获取解决方案

建站指南

公司新闻

常用资料

怀柔做网站

客户动态

建站指南

行业新闻

公司公告

网络营销

网站优化

售前咨询
致电 010-69632027

售后服务
邮箱:bxhsit@126.com

在线咨询
怀柔巨优网络

当前位置:网站首页>新闻动态 > 建站指南 > IE下img多余5像素空白解决方法

IE下img多余5像素空白解决方法

近地实践中越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例:

html

<ul>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
</ul>

css

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

其中 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 的 font-size:0;

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;
}

 

巨优网络微信,巨优网络微博

巨优网络网站建设为怀柔区企业提供网站建设服务,提供怀柔网站建设怀柔网站制作怀柔网站优化服务,为怀柔区各单位提供完善的网站建设解决方案,推动怀柔信息化发展!怀柔做网站,怀柔做网站公司,选巨优网络!咨询热线:010-69632027

  怀柔网站建设优秀提供商-APP建站--微信营销-手机网站

巨优简介|如何合作|提交网站需求|联络方式|有问必答

全国统一咨询服务

010-69632027  13241022177