IE六、七、8(Q)中盒模型某些兼容性問題

一、負邊距 (margin) 致使元素溢出 hasLayout 容器時顯示異常

    以下代碼：

<div style="width:100px; height:100px; border:1px solid red;">
    <div style="border:1px solid blue; margin:-5px;">123</div>
</div>

 結果在各類瀏覽器顯示以下：

        根據W3C CSS2.1規範，當給一個塊級元素設置了負值的 'margin' ，若是該元素的父容器 'overflow' 爲 'visible' （ 'overflow' 的默認值就是 'visible' ），這個塊級元素可能會因爲負值的 'margin' 而使其父容器沒法全容納其自身，其會部分「溢出」父容器並在父容器以外被渲染，然而：

• 在 IE6 IE7(Q) IE8(Q) 下，因爲負值的 'margin' 致使子元素 DIV 超出其父容器部分，均被父元素隱藏，而其 'margin-bottom' 因爲沒有超出父容器則被顯示出來。
• 在 IE7(S) 下狀況比較特殊， 'margin-top' 與 'margin-right' 與 IE6 中同樣，超出父容器的部分被父容器隱藏。而 'margin-bottom' 雖然並無由於其負值而超出父容器，但瀏覽器卻將子元素 DIV 的內部裁去了5px。而 'margin-left' 則沒有由於負值的影響而被父容器隱藏，反而顯示了出來。

解決方案：

在確保元素的容器觸發 hasLayout 的前提下，爲該元素同時設置 'position:relative' 和 'zoom:1'。

首先須要保證容器在IE中觸發 hasLayout 屬性，能夠經過zoom:1實現。

在 IE7(S) 中，當使設置了負值 'margin' 的元素的 hasLayout 屬性爲 'true' ，即觸發該元素的 hasLayout 特性後，此 Bug 現象消失，例如爲該元素設置寬度或高度，或者在徹底不影響該元素盒模型的狀況下使用 zoom:1 來觸發 hasLayout 從而消除此 Bug 。

在 IE6 IE7(Q) IE8(Q) 中，僅僅觸發 hasLayout 特性並不必定能消除此 Bug ，同時還須要爲該元素設置 'position:relative'，即在徹底不影響該元素盒模型的狀況下使用 zoom:1 'position:relative' 。

二、IE6 IE7 IE8(Q) 中浮動元素和絕對定位元素某些狀況下會影響普通流中毗鄰 'margin' 的摺疊

         在CSS 2.1中，

• 普通流中兩個或多個塊框相鄰的垂直 'margin' 會摺疊。
• 浮動框和其它框之間的垂直 'margin' 不折疊(浮動框與浮動框內的浮動框 'margin' 不折疊)。
• 絕對定位框之間 'margin' 不折疊(絕對定位框與絕對定位框內的絕對定位框 'margin' 不折疊)。

    2.一、普通流中子元素和父元素毗鄰 'margin' 的摺疊

        分析如下代碼：

<div style="border:3px solid silver; width:300px;">
    <div id="container" style="background-color: blue;">
        <div style="float:left; background-color: green;">above</div>
        <div id="DIV" style="margin:30px 0; background-color:gold;">content</div>
        <div style="float:right; background-color: green;">below</div>
    </div>
</div>

根據 CSS2.1 規範中的描述可知， DIV  和  container  會發生 'margin' 摺疊。

結果在各類瀏覽器顯示以下：

        可見，在 IE6 IE7 IE8(Q) 中，浮動元素會阻止普通流中毗鄰的父子 'margin' 的摺疊。

    2.二、在 IE 中絕對定位元素可能阻止父子元素相鄰 'margin' 的摺疊

        以下代碼：

<div style="border:3px solid silver; width:300px;">
    <div id="container" style="background-color: blue;">
        <div style="position:absolute; background-color: green;">above</div>
        <div id="DIV" style="margin:30px 0; background-color:gold;">content</div>
        <div style="position:absolute; background-color: green;">below</div>
    </div>
</div>

        根據 CSS2.1 規範中的描述可知， DIV  和  container  會發生 'margin' 摺疊。

        結果在各類瀏覽器顯示以下：

      2.三、普通流中兄弟節點毗鄰 'margin' 的摺疊

        在 IE6 IE7(Q) IE8(Q) 中，浮動元素可能會阻止普通流中毗鄰 'margin' 的摺疊。

        以下代碼：

<div style="border:3px solid silver; width:300px;">
    <div id="DIV1" style="margin-bottom:50px; background-color:gold;">above</div>
    <div id="Float" style="float:left; background-color: green; width:100%;">Float</div>
    <div id="DIV2" style="margin-top:50px; background-color:gold;">below</div>
</div>

        根據 W3C 標準， DIV1  和  DIV2  應該發生 'margin' 摺疊，由於它們會認爲不在普通流中的  Float  不存在。

        結果在各類瀏覽器顯示以下：

        可見，在 IE6 IE7(Q) IE8(Q) 中， 'margin' 毗鄰的兄弟節點之間的浮動元素可能會阻止它們的 'margin' 摺疊。

        解決方法：1. 根據具體需求，調整 'margin' 的位置和大小；
                       2. 使用 CSS hack 設置 IE 中的 'margin' 大小，以免 IE 跟其餘瀏覽器的佈局差別。

三、IE6 IE7 IE8(Q) 中父元素帶有 hasLayout 時，其左浮動子元素果存在帶有非零值的 margin-bottom 時，則該子元素的 margin-bottom 設置失效；

    以下代碼：

<span>content_text</span>
<div style="zoom:1; overflow:hidden; background:lightgrey;">
    <div style="float:left; width:50px; height:50px; margin:20px; background:dimgray;"></div>
</div>
<span>content_text</span>

結果在各類瀏覽器顯示以下：

        可見，在 IE6 IE7 IE8(Q)中，容器 DIV 的 'zoom:1' 觸發了 hasLayout，其內部浮動子元素也參與到了容器的高度計算之中。可是浮動子元素設置的 'margin-bottom' 消失；在其餘瀏覽器中，其內部浮動子元素也參與到了容器的高度計算之中。浮動子元素的四個方向的 margin 均正常。

        解決方法：爲容器顯式地設置高度。若容器高度不定，則要避免在觸發了 hasLayout 的容器內的浮動子元素上設置 'margin-bottom' 特性，能夠經過爲容器設置 'padding-bottom' 達到類似的效果。

只要不一樣時觸發父元素hasLayout、子元素左浮動、左浮動子元素擁有非零的 margin-bottom 值，這三個條件中任意一項，都可解決此問題。