CSS布局常見五大問題及解決方案
本文和大家重點討論一下CSS布局常見五大問題及解決方案，比如說float的3像素問題，當使用float浮動容器后，在IE6下會產生3px的空隙，所以對布局精度要求高的話，可以在float浮動容器樣式里加針對IE6的屬性”_margin-right”和”*html”。
5個CSS布局的常見問題及解決方法
總結了5個關于CSS布局的常見問題，并附有解決方法，供參考。
◆float的3像素問題及解決辦法
當使用CSS中float浮動容器后，在IE6下會產生3px的空隙，有意思的是右側容器沒設置高度時3px在右側容器內部，當設定高度后又跑到容器的左側了，所以對布局精度要求高的話，可以在float浮動容器樣式里加針對IE6的屬性”_margin-right”和”*html”，如：
- #sidebar{float:left;width:200px;_margin-right:-3px;}
或者
- #sidebar{float:left;width:200px;}
- *html#sidebar{margin-right:-3px;}
◆CSS上邊容器浮動后，下邊的容器跟著浮動，造成頁面錯亂
如圖中布局所示：footer必須要單獨占一行，但當sidebar浮動后，content的高度小于sidebar的高度時，footer也跟著浮動到sidebar右側了，造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器，設置樣式
- clear:both;height:0;font-size:1px;line-height:0px;
用clear:both清除，即可使頁面正常
◆IE6下float浮動導致雙倍邊距的bug
當頁面內有多個連續浮動時，如本頁的圖標列表是采用左浮動，此時設置li的左側margin值時，在最左側呈現雙倍情況。如外邊距設置為10px，而左側則呈現出20px，解決它的方法是在浮動元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug
◆當子元素浮動且未知高度時，怎么使父容器適應子元素的高度？
這種情況可在父窗口加上overflow:auto;zoom:1;這兩個樣式屬性，overflow:auto;是讓父容器來自適應內部容器的高度，zoom:1;是為了兼容IE6而使用的CSS
HACK。zoom:1;通不過W3C的驗證，這也是遺憾的一點，幸好IE支持<!–[ifIE]>這種寫法，可以專門針對IE來寫單獨的樣式，所以可以把這個屬性寫在頁面內的<!–[ifIE]>中，這樣應該可以通過驗證了
◆CSS布局的相對定位與絕對定位
規劃頁面時，許多時候需要用到相對定位或絕對定位，這里邊有個CSS技巧，掌握后有些地方就不用繁冗的js了。就是當父容器使用相對定位后，此時子元素再使用絕對定位，位置是相對于父元素。如果父元素沒有定位，那么子元素的絕對定位是相對于瀏覽器
文章出處：標準之路(http://www.aa25.cn/div_CSS/815.shtml)
【編輯推薦】
