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) |
|---|
問題分析
分析以下代碼:
新聞熱點
疑難解答