bug記錄：IE8，包含塊min-height/height共存時的高度計算bug

問題的條件有：

• A元素是B元素的包含塊。
• A元素設置overflow:hidden;，並同時設置了height和min-height，同時height計算值 < min-height
• 原生IE8瀏覽器，或者IE9瀏覽器的IE8兼容性模式（如下統稱爲IE8）

期待結果：

• 若B元素爲absolute定位元素，A元素爲relative定位元素，則B元素的包含塊高度爲A元素的padding-edge高度
• 若A、B元素均爲常規流定位元素，則B元素的包含塊高度爲A元素的content-box高度
• 若A元素同時設置了min-height和height，同時height計算值小於min-height。由於height權重小於min-height，最終A元素的content-box高度計算值應以min-height爲準

IE8的bug是：

• 若B元素的包含塊的content-box的值計算錯誤，在height計算值小於min-height的同時，誤取了heihgt值做爲其包含塊的content-box部分
• B元素跟其包含塊有關的屬性，如百分比top/bottom/百分比height均受到影響，所以，B元素的位置可能受到影響
• A元素的最終高度計算依然正確
• 受到影響的僅僅是以A元素爲包含塊的元素，包括B元素

DEMO

• 一個使用了absolute定位的DEMO：

http://jsfiddle.net/humphry/Xzy28/7/

• 一個未使用absolute定位的DEMO，可見jsfiddle：

http://jsfiddle.net/humphry/NSCLa/8/

咱們看一下渲染結果的區別。

計算流程，試解釋

	absolute	static
其餘瀏覽器	外層高500/內層高500	外層高500/內層高300
IE8	外層高500/內層高220	外層高500/內層高20

咱們先看看外層的計算。

.wrapper的height是20px，被min-height的300px覆蓋，最終的高度值爲：100px padding-top + 100px padding-bottom + 200px height計算值 = 500px。這裏全部的瀏覽器都計算正確。

對於內層，IE8/其餘正常瀏覽器，在absolute定位和static定位下的區別有：

1. 正常瀏覽器，.innerabsolute定位： .inner設置了100%高度，即100%的包含塊的高度，即外層容器的padding-edge高度，也就是外層容器的 200px padding高度 + 300px content-box高度 = 500px

2. IE８瀏覽器，.innerabsolute定位： .inner的包含塊的content-box高度誤用了height值而非min-height值，計算出來高度值爲 200px padding高度 + 20px height高度 = 220px

3. 正常瀏覽器，.inner　static定位： .inner設置了100%高度，即100%的包含塊的高度，即外層容器的content-box高度，也就是外層容器的 300px content-box高度 = 300px

4. IE８瀏覽器，.inner　static定位： .inner的包含塊的content-box高度誤用了height值而非min-height值，計算出來高度值爲 20px height高度 = 20px

解決方案

• 去掉.wrapper上的overflow:hidden;
• overflow:hidden;加在不【同時設置height、min-height，且height計算值<min-height】的元素上

---

參考資料

• 關於包含塊的斷定：http://w3help.org/zh-cn/kb/008/