相容問題1

標籤：

問題描述
--
IE6 IE7 IE8(Q) 下，若浮動元素之前存在兄弟行內非浮動元素，IE 會將浮動元素所在的“當前行”認為是其前邊的兄弟行內元素所產生的匿名框的底邊，導致該浮動元素折行。

造成的影響
---
如果我們僅僅在 IE6 IE7 中編寫頁面並進行測試，當看到上面對測試代碼的中的效果，在不清楚導致右浮動元素換行的原因是 IE6 IE7 對於同一行內浮動元素與非浮動行內元素的處理存在 Bug 的情況時，有可能會為右浮動元素設定一個負值 ‘margin-top‘，這樣雖然在 IE6 IE7 中能保證布局的正常，但在其他瀏覽器下就會出現異常。

受影響的瀏覽器
---
IE6 IE7 IE8(Q)

問題分析
--
分析以下代碼：

    <div style="border:1px solid black; font:14px Verdana; padding:5px;">
        <span style="background:gold;">Text1</span>
        <span style="background:lightblue;">Text2</span>
        <span style="background:pink;">Text3</span>
        <span style="background:greenyellow;">Text4</span>
        <span style="background:peru;">Text5</span>
        <span style="background:tomato; float:right;">Some text aligning right</span>
    </div>

----
Google等下效果 如：
<div style="border:1px solid black; font:14px Verdana; padding:5px;">
        <span style="background:gold;">Text1</span>
        <span style="background:lightblue;">Text2</span>
        <span style="background:pink;">Text3</span>
        <span style="background:greenyellow;">Text4</span>
        <span style="background:peru;">Text5</span>
        <span style="background:tomato; float:right;">Some text aligning right</span>
    </div>

 在 IE6 IE7 IE8(Q) 中，浮動的 SPAN 折行浮動在新的一行上，同時位置也脫離了其父容器；
 在其他瀏覽器中，則遵照 CSS 2.1 規範對浮動的定義，將浮動元素顯示在浮動框另一邊的第一個可用行上。

在 IE6 IE7 下，測試代碼沒有達到我們預計的效果，右浮動的 SPAN 折行浮動在新的一行上，同時位置也脫離了其父容器。 現在看看 Text1、 Text2……Text5 所在的 SPAN 元素作為浮動框之前當前行的內容，應該顯示在浮動框另一邊的第一個可用行上。 右浮動的 SPAN 緊貼在其父容器的右邊界，其左側的空白地區只要有足夠的空間容納這 5 個非浮動的 SPAN 元素，它們就應該保持與右浮動的 SPAN 元素位於同一行上。 這裡 IE6 IE7 以及所有版本 IE 的混雜模式的處理均是錯誤的。



此問題的觸發條件
--

   1同一個父容器內有多個行內元素；

   2某些為非浮動元素，某些為浮動元素（可以是左浮動或右浮動）；

   3浮動的子項目不都是位於非浮動的子項目之前。

---

解決方案
---
依具體情況可以使用三種方法：使用絕對位置類比右浮動、使用 IE hack 專門在IE6 IE7 中設定負的上外邊距、將右浮動的 SPAN 元素調整到所有非浮動 SPAN 元素之前。

  1 使用絕對位置（position:absolute）類比右浮動（float:right）。 為了避免 IE6 IE7 的這個 BUG，可以不使用右浮動，而是用絕對位置及右位移（right:XXXpx），如為右浮動元素設定 ‘position:absolute‘ 及 ‘right:3px‘ 替代 ‘float:right‘，但這樣做的代價是必須為父容器 DIV 元素設定 ‘postion:relative‘，這麼做仍然會破壞原文檔結構。所以我們並不推薦此方法。

   2使用 IE hack 專門在IE6 IE7 中設定負的上外邊距（margin-top:-XXXpx）。 既然此 Bug 為IE6 IE7 專有，則只需要在 IE6 IE7 下為右浮動元素設定一個負的上外邊距即可，其他瀏覽器保持原樣式。所以可以考慮使用只有 IE6 IE7支援的 hack 方式：在 CSS 特性前加星號 ‘*‘。如 *margin:-23px 5px 0 0，這樣既可消除 IE6 IE7 中的 Bug，但是這麼做是利用了瀏覽器的 Bug，並沒有消除 Bug。在能有個更好的解決方案的時候，不推薦使用 CSS hack 來解決問題。

   3調整SPAN元素的位置。 通過上面總結的 Bug 觸發條件，我們可以考慮直接調整父容器中 SPAN 子項目的位置來迴避 IE6 IE7 中此 Bug，即將右浮動的 SPAN 元素調整到所有非浮動 SPAN 元素之前。

相容問題1