CSS HACK：解決IE下img多餘空白的辦法（CSS實例）

CSS HACK：解決IE下img多餘空白的辦法（CSS實例）最近地實踐中，越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩，需要注意，當然，問題還是一如既往的出現在 IE 下。以下為其中一例：html<ul> <li><a href=「http://www.zzarea.com」><img src="img/temp.jpg" alt="" /></a></li> <li><a href="http://www.zzarea.com"><img src="img/temp.jpg" alt="" /></a></li> <li><a href="http://www.zzarea.com"><img src="img/temp.jpg" alt="" /></a></li> <li><a href="http://www.zzarea.com"><img src="img/temp.jpg" alt="" /></a></li></ul>cssul{ width: 280px;}ul li{ display:block; height:57px; width:277px;}其中 temp.jpg 尺寸為 277×57Firefox 下的正常表現：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;}本文來源網頁製作教程網www.zzarea.com 原文鏈接：http://www.zzarea.com/css/csshk/css-746.html
推薦閱讀：