伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@lenville 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
受影響的版本
這個bug影響：IE6
表現
min-height屬性被忽略
教程釋出時間
2009年7月17日 星期五 13:10:16
問題描述
IE不僅沒有正確支援height屬性，它甚至完全不識別min-height屬性。幸運的是，另一個bug恰好能彌補這一缺陷，稍後再詳細描述，我們先來看一下demo。
示例
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
HTML 程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p> |
CSS程式碼：
|
1 2 |
#buggy, #biggie { min-height: 100px; } |
在這裡沒什麼好多說的。我們有三個P段落，其中兩個（#buggy和#biggie）的min-height屬性都被設定為100px。在符合標準的瀏覽器中，#buggy元素的高度將會是100畫素，因為裡面的內容不像#biggie那麼多，而且我們設定了最小高度（min-height）屬性。在IE7以下版本中，#buggy和#normal元素看起來完全一樣，因為min-height屬性被完全忽略掉了。
解決辦法
以下是針對上述bug的解決辦法（按照解決方案的型別排序）
解決方案（條件註釋解決方案）- 有副作用
方案提出時間
2009年7月17日 星期五 13:20:02
修正版本
全部受影響的
方案描述
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
HTML程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p> |
CSS程式碼：
|
1 2 |
#buggy, #biggie { min-height: 100px; } |
條件註釋
|
1 2 3 4 5 6 |
<!--[if lt IE 7]> <style type="text/css"> #buggy, #biggie { height: 100px; } </style> <![endif]--> |
回想一下擴充套件高度（Expanding Height）bug，因為IE7以下版本都沒有限制元素的高度，而是讓它根據需要自動增高，我們可以借用這個bug來提供我們的最小高度（min-height）解決方案。
我們將會使用條件註釋標註IE7以前的版本（請記住，IE7可以正確處理高度屬性的哦）然後將我們賦給min-height的值同樣賦給height屬性。哇，問題解決了。
條件註釋解決方案（CCS-Conditional Comments Solution）的副作用
副作用相對是細微的。受影響的瀏覽器處理height屬性的方式跟符合標準的瀏覽器處理min-height屬性的方式幾乎一樣。然而，還有一個例外是，如果overflow屬性被新增到這個元素上，IE會隱藏或者滾動超出部分的內容。
解決方案（Javascript解決方案）
方案提出時間
2009年7月17日 星期五 13:31:20
修正版本
全部受影響的瀏覽器
方案描述
I CAN HAS MIN-HEIGHT!
Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit.
Suspendisse vel velit at ipsum
tristique porttitor. Suspendisse
potenti. Nam non arcu sit amet
nulla volutpat bibendum. Aenean
I CAN HAS MIN-HEIGHT!
HTML程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 |
<p id="buggy">I CAN HAS MIN-HEIGHT!</p> <p id="biggie"> Lorem ipsum<br> dolor sit amet,<br> consectetuer adipiscing elit.<br> Suspendisse vel velit at ipsum<br> tristique porttitor. Suspendisse<br> potenti. Nam non arcu sit amet<br> nulla volutpat bibendum. Aenean<br> </p> <p id="normal">I CAN HAS MIN-HEIGHT!</p> |
CSS程式碼：
|
1 2 3 4 5 6 |
#buggy, #biggie { min-height: 100px; overflow: hidden; /* only to show that everything works fine */ } |
條件註釋：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--[if lt IE 7]> <style type="text/css"> #buggy, #biggie { height: expression( this.scrollHeight <= 100 ? "100px" : "auto" ); } </style> <![endif]--> |
這一次，HTML標記和CSS程式碼跟原始demo相同，我增加了
|
1 2 3 |
#buggy, #biggie{ Overflow: hidden; } |
僅僅為了演示overflow 已不再是CCS（Conditional Comments Solution）相關的問題。
成功的招數就是在條件註釋裡為height屬性設定的專有表示式的值，當然，又是針對IE7以下的版本。通過這個方法，我們就可以在樣式表裡執行Javascript程式碼，然後把返回值賦給這個屬性。
如果你不熟悉JS，那我就解釋一下表示式expression()裡面的程式碼都做了什麼。首先，它獲取匹配選擇器（#buggy，#biggie）的相應元素的高度值，然後通過利用三元運算子我們將會選擇即將賦給height屬性的值（在CSS程式碼裡）。三元運算子可以這樣理解：
“布林值(True 還是 False)” ? “值為True時返回這裡的值” : “值為False時返回這裡的值”
所以我們的JS程式碼的意思是：
“這個元素的高度是否小於等於100畫素(px)” ? “如果是，把100px賦給height” : “如果不是把height設為auto”。
請牢記this.scrollHeight返回的height值單位是畫素（pixels，寫作px），如果你需要其它單位，可以用Javascript程式碼通過計算得到一個合適的單位，啊只不過這已經超出了這個教程的範圍，如果需要請看這裡。
或者你可以使用由DoxDesk提供的MinMax script，在IE下這個指令碼對於min-width/max-width/min-height和max-height這些屬性都提供了良好支援（而這些本來在IE7以下版本都是不支援的）。我保留了一份這個指令碼的本地備份，以防DoxDesk的連結不再能夠使用，你只需把<script type=”text/javascript” src=”minmax.js”></script>嵌入到你的頁面的<head>標籤裡，然後指令碼就會施展它的魔法。