IE CSS Bug系列：高度額外擴充套件的Bug

伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@lenville 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）

【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。

—————————————————————————–

受影響版本

這隻bug影響IE6

表現

元素比指定的高度長（主要適用於小的高度）

教程釋出時間

2009年7月17日 星期五 09:58:19

問題描述

儘管這些bug出現在頁面上不是很符合語義，然而那些經驗最豐富的開發者們遲早有一天也可能會遇到這個bug，它讓IE盒模型在解析的時候，在元素上面生成了一個非常小的高度值。

當你向這個元素裡新增一些文字的時候，這個bug就表現得很明顯了。下面這個示例可以讓你更容易理解

HTML Code:

CSS Code:

首先，我想提醒你注意一下，background和margin屬性跟這個bug無關，我寫上它們僅僅是為了讓你能夠更輕鬆地把程式碼呈現樣式與demo的樣式聯絡得更緊密一些。

這個demo呈現了兩個3畫素高的線，實際上它們不過是div標籤。其中一個裡面包含著單詞“Lorem”，在任何一個自作聰明的瀏覽器（IE7以下）裡，這個單詞都會溢位到第二個div裡，所以在IE7裡，這個div的高度就會保持3畫素。

當你在低於IE7的版本里看上述demo的時候，會產生一些意想不到的糟糕問題，我們的兩個div都比3畫素還要高一些。到底發生什麼了呢？讓我們看一下包含單詞“Lorem”的div，你應該能注意到這個div擴大了一些以容納這個單詞，你也會注意到沒有任何文字的那個div也擴充套件了相同的高度。

這個bug現在更有說得通了，即使在空的元素裡，IE也會有至少一個空間。由於打破了盒模型產生的那個空間，使得我們的div擴充套件了而不是讓這個空間溢位到div外。讓我們假設那個空間受font屬性的控制。現在，聰明的你已經作好準備，在聽到overflow和font嘗試做點兒事情。

 

解決方案

以下是上述bug的解決方法（以型別排序）

“清除”解決方案- 有副作用

方案提出時間

2009年年7月17日10:05:25

修訂版本

全部受影響的版本

方案描述

這個修補方法非常簡潔明瞭，我們將會用到overflow屬性去修補IE的溢位問題，下面就是經過我們修補的之後的demo

HTML Code:

CSS Code:

我們為div加上overflow: hidden的樣式，來解決高度擴充套件bug。實際上，在新增overflow屬性的地方，原先在那些聰明過頭的瀏覽器（IE6-）裡的空間位置現在被隱藏了。

 

“清除”解決方案的副作用

這個解決方案的副作用是所有溢位的元素都會被隱藏，可能有些你想要的元素也會被隱藏

“清除”解決方案 – 有副作用

方案提出時間

2009年7月17日 星期五 10:11:15

修訂版本

全部受影響

方案描述

在這個解決方案裡，我們將給font-size屬性賦值為0。從個人角度來說我更建議你們使用另外一個“清除”解決方案，因為有一些使用者可能會禁用頁面裡字型指定的功能（檢視瀏覽器選單欄裡的 Tool(工具) -> Internet Options(Internet設定) -> General(常規) -> Accessibility(可訪問性) -> Ignore font sizes(忽視字型大小)）。下面就是經過我們修補的之後的demo

HTML Code:

CSS Code:

無需多言，如果你讀懂了產生這個bug的原因，一切問題你都迎刃而解，設定font-size為0，我們認為使這個空間和文字小到不會產生任何溢位。

我再一次推薦你使用另外一個解決方案，使用overflow: hidden解決問題，因為使用者很可能就真的在瀏覽器裡禁用調整字型大小，到那時你所做的一切相容都功虧一簣了。

清除解決方案的副作用

這個解決方案的副作用是所有溢位的元素都會被隱藏，可能有些你想要的元素也會被隱藏

【這裡寫的跟上面一樣，我不太確定是不是原文就寫錯了】