DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> IE中img多出5px的空白解決4種方法
IE中img多出5px的空白解決4種方法
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:最近地實踐中,越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩,需要注意,當然,問題還是一如既往的出現在 IE 下。

嗯,開場先胡扯幾句不相關地感言。最近的工作讓我有了很多實踐的機會,同時也讓我收獲頗豐。在群裡聊天的時候也提到過,所有的學習過程,最好是理論-實踐-再理論-再實踐。。。的一個循環往復的過程。這裡說的理論是個比較寬泛地概念,其中包括書本理論,也包括對實踐地總結。只有理論沒有實踐,往往造成眼高手低,想得好,做得差;只一味地實踐卻不通過理論地學習和總結,看起來好像忙忙碌碌,到頭來會兩手空空。

最近地實踐中,越來越覺得 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 下的正常表現:
demo-ff
IE6 下的非正常表現:
demo-ie
很明顯地可以看到 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;
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved