IE6 行內定義成塊元素後高度失效

2022-02-28 17:59:47 字數 861 閱讀 4541

問題描述:

ie6下,空標籤塊元素height定義失效,表現為除設定的height值外還會顯示n畫素額外的高度。

實際運用中,若標籤為空且定義了小於14px的高度,再加入一背景圖的話,會發現該元素高度同其它瀏覽器不同,即定義的高度始終會顯示成height:14px 。

問題**如下:

.demo

查閱網上資料,大都說ie6空標籤的塊元素會有個最低限度的高,其值為大於20px左右,當height設定成小於這個值時,這個值會無效。解決方法是給該元素加overflow:hidden。

經測試,加overflow屬性後該空標籤的塊元素能通過設定height屬性來控制元素的高度,但會導致ie6,ie7瀏覽器下,該元素的背景圖顯示不全。

個人認為,究其原因是因為加了overflow:hidden屬性該空標籤塊狀元素實現高還是14px,只是overflow:hidden會把超高的部分截掉了而已,所以才會有該元素的背景圖顯示不全的怪現象出現!

解決方法是為該元素加font-size:0 hack處理下。

為了更形象的說明這個是針對瀏覽器的hack處理,改進後的樣式**如下:

.demo

實際上可以不加overflow:hidden;只須針對ie6加hack處理下就可解決了,**如下:

.demo

關於ie6塊元素行內元素轉換

1 inline元素的display屬性設定為inline block時,所有的瀏覽器都支援 2 block元素的display屬性設定為inline block時,ie6 ie7瀏覽器是不支援的 ie6下塊元素如何實現display inline block的效果?有兩種方法 1 先使用displ...

IE6中莫名其妙地多出一行文字 IE6注釋BUG

ie6中,一行文字被自動地複製一部分,並顯示在其下邊。出現這個問題的原因 大部分是由注釋造成文字溢位,屬於ie6的bug,溢位文字的字數 注釋的條數 2 1,這裡的字數在中 文或英文數字時都成立。注釋坐在位置與溢位位置 區塊的浮動以及文字區塊的固定寬度有必然聯絡。通常,乙個容器包含2兩個具有 flo...

IE6下css定義DIV高度的問題

ie6下預設的字型尺寸大致在 12 14px 之間,當你試圖定義乙個高度小於這個預設值的 div 的時候,ie 會固執的認為這個層的高度不應該小於字型的行高。所以即使你用 height 4px 來定義了乙個 div 的高度,實際在 ie 下顯示的仍然是乙個 12 px 左右高度的層。新增overfl...