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