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

王朝数码·作者佚名  2009-06-09
窄屏简体版  字體: |||超大  

嗯,开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会,同时也让我收获颇丰。在群里聊天的时候也提到过,所有的学习过程,最好是理论-实践-再理论-再实践。。。的一个循环往复的过程。这里说的理论是个比较宽泛地概念,其中包括书本理论,也包括对实践地总结。只有理论没有实践,往往造成眼高手低,想得好,做得差;只一味地实践却不通过理论地学习和总结,看起来好像忙忙碌碌,到头来会两手空空。

最近地实践中,越来越觉得 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

</ulcss

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;

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航