武林網(www.companysz.com)文章簡介：最近地實踐中，越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩，需要注意，當然，問題還是一如既往的出現在 IE 下。

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

最近地實踐中，越來越覺得 li 元素中包含 a img 元素的時候會比較麻煩，需要注意，當然，問題還是一如既往的出現在 IE 下。以下為其中一例：

html

><><> ><><> ><><> ><><></ul>

css

ul{ width: 280px;}ul li{ display:block; height:57px; width:277px;}

其中 temp.jpg 尺寸為 277×57

Firefox 下的正常表現：

使 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;}