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 折行浮動在新的一行上，同時位置也脫離了其父容器 。現在看看 Text1、 Text2Text5 所在的 SPAN 元素作為浮動框之前當前行的內容 ， 應該顯示在浮動框另一邊的第一個可用行上 。右浮動的 SPAN 緊貼在其父容器的右邊界，其左側的空白區域只要有足夠的空間容納這 5 個非浮動的 SPAN 元素，它們就應該保持與右浮動的 SPAN 元素位于同一行上 。這里 IE6 IE7 以及所有版本 IE 的混雜模式的處理均是錯誤的 。
此問題的觸發條件:
同一個父容器內有多個行內元素；某些為非浮動元素，某些為浮動元素（可以是左浮動或右浮動）；浮動的子元素不都是位于非浮動的子元素之前 。
解決方案
【span 右浮動折行 解決ie6/7中span右浮動折行問題】依具體情況可以使用三種方法：使用絕對定位模擬右浮動、使用 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
