span 右浮動(dòng)折行 解決ie6/7中span右浮動(dòng)折行問題
RM8005: IE6 IE7 IE8(Q) 中行內(nèi)元素后相鄰的浮動(dòng)元素在某些情況下會(huì)折行放置在之前行內(nèi)元素所在行框的底部
標(biāo)準(zhǔn)參考
W3C CSS 2.1 規(guī)范文檔里對(duì)于浮動(dòng)元素與非浮動(dòng)行內(nèi)元素相鄰時(shí)的情況有如下解釋 。以下是關(guān)鍵段落：
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.由上面的描述可以得到以下結(jié)論：如果一個(gè)元素浮動(dòng)前是一個(gè)行內(nèi)元素，則該元素浮動(dòng)后 ， 頂部應(yīng)與其之前所在的行框頂部對(duì)齊 。
關(guān)于浮動(dòng)的詳細(xì)信息，請(qǐng)參考 CSS 2.1 規(guī)范 9.5 Floats 中的內(nèi)容 。
問題描述
IE6 IE7 IE8(Q) 下，若浮動(dòng)元素之前存在兄弟行內(nèi)非浮動(dòng)元素，IE 會(huì)將浮動(dòng)元素所在的當(dāng)前行認(rèn)為是其前邊的兄弟行內(nèi)元素所產(chǎn)生的匿名框的底邊 ， 導(dǎo)致該浮動(dòng)元素折行 。
造成的影響
如果我們僅僅在 IE6 IE7 中編寫頁(yè)面并進(jìn)行測(cè)試，當(dāng)看到上面對(duì)測(cè)試代碼的截圖中的效果，在不清楚導(dǎo)致右浮動(dòng)元素?fù)Q行的原因是 IE6 IE7 對(duì)于同一行內(nèi)浮動(dòng)元素與非浮動(dòng)行內(nèi)元素的處理存在 Bug 的情況時(shí) ， 有可能會(huì)為右浮動(dòng)元素設(shè)置一個(gè)負(fù)值 ’margin-top’，這樣雖然在 IE6 IE7 中能保證布局的正常，但在其他瀏覽器下就會(huì)出現(xiàn)異常 。
受影響的瀏覽器
IE6 IE7 IE8(Q)問題分析
分析以下代碼：
復(fù)制代碼代碼如下:
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) 中，浮動(dòng)的 SPAN 折行浮動(dòng)在新的一行上 ， 同時(shí)位置也脫離了其父容器；在其他瀏覽器中，則遵照 CSS 2.1 規(guī)范對(duì)浮動(dòng)的定義 ， 將浮動(dòng)元素顯示在浮動(dòng)框另一邊的第一個(gè)可用行上 。在 IE6 IE7 下，測(cè)試代碼沒有達(dá)到我們預(yù)計(jì)的效果，右浮動(dòng)的 SPAN 折行浮動(dòng)在新的一行上，同時(shí)位置也脫離了其父容器 ?，F(xiàn)在看看 Text1、 Text2Text5 所在的 SPAN 元素作為浮動(dòng)框之前當(dāng)前行的內(nèi)容 ， 應(yīng)該顯示在浮動(dòng)框另一邊的第一個(gè)可用行上 。右浮動(dòng)的 SPAN 緊貼在其父容器的右邊界，其左側(cè)的空白區(qū)域只要有足夠的空間容納這 5 個(gè)非浮動(dòng)的 SPAN 元素，它們就應(yīng)該保持與右浮動(dòng)的 SPAN 元素位于同一行上 。這里 IE6 IE7 以及所有版本 IE 的混雜模式的處理均是錯(cuò)誤的 。
此問題的觸發(fā)條件:
同一個(gè)父容器內(nèi)有多個(gè)行內(nèi)元素；某些為非浮動(dòng)元素，某些為浮動(dòng)元素（可以是左浮動(dòng)或右浮動(dòng)）；浮動(dòng)的子元素不都是位于非浮動(dòng)的子元素之前 。
解決方案
【span 右浮動(dòng)折行 解決ie6/7中span右浮動(dòng)折行問題】依具體情況可以使用三種方法：使用絕對(duì)定位模擬右浮動(dòng)、使用 IE hack 專門在IE6 IE7 中設(shè)置負(fù)的上外邊距、將右浮動(dòng)的 SPAN 元素調(diào)整到所有非浮動(dòng) SPAN 元素之前 。
使用絕對(duì)定位（position:absolute）模擬右浮動(dòng)（float:right） 。為了避免 IE6 IE7 的這個(gè) BUG，可以不使用右浮動(dòng)，而是用絕對(duì)定位及右偏移（right:XXXpx），如為右浮動(dòng)元素設(shè)置 ’position:absolute’ 及 ’right:3px’ 替代 ’float:right’ ， 但這樣做的代價(jià)是必須為父容器 DIV 元素設(shè)置 ’postion:relative’，這么做仍然會(huì)破壞原文檔結(jié)構(gòu) 。所以我們并不推薦此方法 。使用 IE hack 專門在IE6 IE7 中設(shè)置負(fù)的上外邊距（margin-top:-XXXpx） 。既然此 Bug 為IE6 IE7 專有 ， 則只需要在 IE6 IE7 下為右浮動(dòng)元素設(shè)置一個(gè)負(fù)的上外邊距即可，其他瀏覽器保持原樣式 。所以可以考慮使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星號(hào) ’*’ 。
如 *margin:-23px 5px 0 0，這樣既可消除 IE6 IE7 中的 Bug ， 但是這么做是利用了瀏覽器的 Bug，并沒有消除 Bug 。在能有個(gè)更好的解決方法的時(shí)候，不推薦使用 CSS hack 來(lái)解決問題 。調(diào)整SPAN元素的位置 。通過上面總結(jié)的 Bug 觸發(fā)條件 ， 我們可以考慮直接調(diào)整父容器中 SPAN 子元素的位置來(lái)回避 IE6 IE7 中此 Bug ， 即將右浮動(dòng)的 SPAN 元素調(diào)整到所有非浮動(dòng) SPAN 元素之前 。
復(fù)制代碼代碼如下:
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
相關(guān)經(jīng)驗(yàn)推薦
- 需要加window 網(wǎng)頁(yè)右鍵ie不支持event.preventDefault和event.returnValue
- 禁止IE用右鍵的JS代碼
- FLASH遮擋DIV浮動(dòng)層解決方案兼容IE FF Chrome
- Edius9中怎么用鼠標(biāo)右鍵調(diào)整素材
- IE6浮動(dòng)換行bug比較實(shí)用簡(jiǎn)單解決方法
- 朋友圈左右腦年齡測(cè)試9題答案是什么 朋友圈測(cè)試你的左右腦年齡玩法攻略
- 朋友圈測(cè)試你的左右腦年齡是真的嗎 微信上左右腦年齡測(cè)試怎么玩
- 三星S9添加浮動(dòng)快門按鈕的操作方法
- yy瀏覽器屏蔽右下角彈窗的操作過程
- 最右里猜歌王者玩法介紹