這幾天接手了一個PC端的需求,遇到了一個問題,就是float:right在IE6/7下會換行展示的BUG。調整IE的兼容性著實讓人頭疼,各種奇奇怪怪的問題層出不窮。話不多說,下面介紹下解決辦法。
首先,我們來舉個栗子:
<div id="box"> <span class="left">左邊的文本內容</span> <p class="right">右邊的文本內容</p></div>這個是基本的文檔結構,接下來是CSS樣式:
* { margin: 0; padding: 0;}#box { width: 300px; padding: 10px; font-size: 12px; overflow: auto; border: 1px solid blue;}p.right { float: right;}這樣一來,在Chrome, Firefox,IE8+等瀏覽器中顯示均正常,顯示效果如下:
但是在IE6/7中顯示的效果確實右邊的內容下沉一行,變成了折行顯示,這顯然是不符合要求的。在折騰css許久無果之后,發現了一個極為簡便的修改方式,就是調整文檔順序,即將HTML代碼進行調整,無需操作CSS代碼,具體修改如下:
<div id="box"> <p class="right">右邊的文本內容</p> <span class="left">左邊的文本內容</span></div>將需要向右浮動的元素位置調整至無需浮動元素之前即可,這樣便可完美解決IE6/7下元素向右浮動折行的問題~~~
新聞熱點
疑難解答