IE下img多餘5畫素空白

2021-09-08 02:34:43 字數 793 閱讀 5607

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

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

html

css

ul

ul li

其中 temp.jpg 尺寸為 277×57

firefox 下的正常表現:

ie6 下的非正常表現:

很明顯地可以看到 ie 中,li 的表現高度,並非我們設定的 57px,而是比其要高,這是因為 img 下面多出了 5px 的空白。

使 li 浮動,並設定 img 為塊級元素

ul

ul li

img

設定 ul 的 font-size:0;

ul

ul li

設定 img 的 vertical-align: bottom;

ul

ul li

img

設定 img 的 margin-bottom: -5px;

ul

ul li

img

解決 IE6 下 img 多餘 5 個畫素的空白

最近的實踐中,越來越覺得 li 標籤中包含 a img 標籤的時候會比較麻煩,需要注意。當然,問題還是一如既往的出現在 ie 下。以下為其中一例 css code ul ul li 其中 temp.jpg 尺寸為 277 57 firefox 下的正常表現 ie6 下的非正常表現 很明顯地可以看到 ...

IE img多餘5畫素空白解決方法

嗯,開場先胡扯幾句不相關地感言。最近的工作讓我有了很多實踐的機會,同時也讓我收穫頗豐。在群裡聊天的時候也提到過,所有的學習過程,最好是理論 實踐 再理論 再實踐。的乙個迴圈往復的過程。這裡說的理論是個比較寬泛地概念,其中包括書本理論,也包括對實踐地總結。只有理論沒有實踐,往往造成眼高手低,想得好,做...

ie6 img邊緣空白

一直以來,在製作頁面,寫css的時候,碰到各瀏覽表現不一樣的時候,不管三七二十一直接寫hacks,雖然最後製作的頁面在各瀏覽器下面表現的一致了,但是css不符合標準,碰到的問題也沒仔細去查詢原因,後期維護的時候,能讓人抓狂。今天又碰到了ie6下面 img邊緣空白的問題,以前是寫個 padding b...