http://www.php100.com/html/webkaifa/DIV_CSS/2012/0208/9791.html
最近的實踐中，越來越覺得 li 標籤中包含 a img 標籤的時候會比較麻煩，需要注意。當然，問題還是一如既往的出現在 IE 下。以下爲其中一例：
<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 Code:
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 { display:block; float:left; 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; }