網頁制作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 下的正常表現:
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; }