span 右浮動折行 解決ie6/7中span右浮動折行問題

RM8005: IE6 IE7 IE8(Q) 中行內元素後相鄰的浮動元素在某些狀況下會折行放置在以前行內元素所在行框的底部

標準參考

W3C CSS 2.1 規範文檔裏對於浮動元素與非浮動行內元素相鄰時的狀況有以下解釋。如下是關鍵段落：

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.

由上面的描述能夠獲得如下結論：若是一個元素浮動前是一個行內元素，則該元素浮動後，頂部應與其以前所在的行框頂部對齊。

關於浮動的詳細信息，請參考 CSS 2.1 規範 9.5 Floats 中的內容。

問題描述

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>

這段代碼在各瀏覽器中的效果以下：

 

IE6 IE7 IE8(Q)	IE8(S) Firefox Chrome Safari Opera

可見，

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

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

此問題的觸發條件:

同一個父容器內有多個行內元素；某些爲非浮動元素，某些爲浮動元素（能夠是左浮動或右浮動）；浮動的子元素不都是位於非浮動的子元素以前。

解決方案

依具體狀況可使用三種方法：使用絕對定位模擬右浮動、使用 IE hack 專門在IE6 IE7 中設置負的上外邊距、將右浮動的 SPAN 元素調整到全部非浮動 SPAN 元素以前。

使用絕對定位（position:absolute）模擬右浮動（float:right）。 爲了不 IE6 IE7 的這個 BUG，能夠不使用右浮動，而是用絕對定位及右偏移（right:XXXpx），如爲右浮動元素設置 'position:absolute' 及 'right:3px' 替代 'float:right'，但這樣作的代價是必須爲父容器 DIV 元素設置 'postion:relative'，這麼作仍然會破壞原文檔結構。因此咱們並不推薦此方法。使用 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 來解決問題。調整SPAN元素的位置。 經過上面總結的 Bug 觸發條件，咱們能夠考慮直接調整父容器中 SPAN 子元素的位置來回避 IE6 IE7 中此 Bug，即將右浮動的 SPAN 元素調整到全部非浮動 SPAN 元素以前。 

複製代碼

代碼以下:

<div style="border:1px solid black; font:14px Verdana; padding:5px;"> <span style="background:tomato; float:right;">Some text aligning right</span> <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> </div>