更新一：
在上面的基礎上追加一個典型的IE6 bug: IE6中絕對定位、浮動元素混用時的BUG 。一個內容區(qū)塊，其中包含兩個浮動的box，外加一個絕對定位的box，設置如下樣式時會發(fā)生IE6浮動元素消失的BUG 。
HTML Code
復制代碼代碼如下:
div class="content"
div class="abs" abs/div
div class="main" main/div
div class="sub" sub/div
/div
CSS Code
復制代碼代碼如下:
*{ padding:0; margin:0;}
.content{width:600px;}
.abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; }
.main{float:left; width:300px; height:200px; background:#f3f3f3; }
.sub{float:left;width:300px; height:200px; background:#bc2931;}
以上代碼在IE6下瀏覽會發(fā)現(xiàn)，絕對定位元素不見了 。
解決方法：
給content加一個display:inline樣式可解決 。
各元素的寬度mainsub2content 。給sub加一個margin-right:-3px樣式讓main和sub不要撐滿content可解決 。
在main元素之前加一個空的div/div，如div/divdiv class=main
給abs元素再嵌套一個div元素，如divdiv class=abs abs/div/div
推薦閱讀
- 瀏覽器兼容之旅第四站:IE常見Bug總結及修復方法—part2
- 多種方法解決min-width 不兼容ie6的問題
- IE6瀏覽器下resize事件被執(zhí)行了多次解決方法
- 搜狗高速瀏覽器錄制下來的視頻在哪看
- 2345瀏覽器怎么打印網(wǎng)頁
- 怎么清理瀏覽器緩存數(shù)據(jù)
- IE6中的position:fixed定位兼容性寫法分享
- 兼容ie6瀏覽器的php下載文件代碼分享
- 兼容IE6的min-width、min-height的簡單方法
- 多瀏覽器下IE6 IE7 firefox li 間距問題第2/2頁