標準布局常見問題及解決辦法

原文見： http://www.aa25.cn/layout/

css2.0盒模型層次平面示意圖和3d示意圖3畫素問題及解決辦法當使用float浮動容器後，在ie6下會產生3px的空隙，有意思的是右側容器沒設定高度時3px在右側容器內部，當設定高度後又跑到容器的左側了，所以對布局精度要求高的話，請參考例29、31的解決方法

上邊容器浮動後，下邊的容器跟著浮動，造成頁面錯亂如以上例子中的footer必須要單獨佔一行，但當sidebar浮動後，content的高度小於sidebar的高度時，footer也跟著浮動到sidebar右側了，造成頁面錯亂。解決辦法是在maincontent和footer之間插入乙個容器，設定樣式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使頁面正常

當子元素浮動且未知高度時，怎麼使父容器適應子元素的高度？這種情況可在父視窗加上 overflow:auto;zoom:1;這兩個樣式屬性，overflow:auto;是讓父容器來自適應內部容器的高度，zoom:1;是為了相容ie6而使用的css hack。zoom:1;通不過w3c的驗證，這也是遺憾的一點，幸好ie支援這種寫法，可以專門針對ie來寫單獨的樣式，所以可以把這個屬性寫在頁面內的中，這樣應該可以通過驗證了

相對定位與絕對定位規劃頁面時，許多時候需要用到相對定位或絕對定位，這裡邊有個技巧，掌握後有些地方就不用繁冗的js了。就是當父容器使用相對定位後，此時子元素再使用絕對定位，位置是相對于父元素。如果父元素沒有定位，那麼子元素的絕對定位是相對於瀏覽器

ie6雙倍邊距bug當頁面內有多個連續浮動時，如本頁的圖示列表是採用左浮動，此時設定li的左側margin值時，在最左側呈現雙倍情況。如外邊距設定為10px，而左側則呈現出20px，解決它的方法是在浮動元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug

doctype html未指定

這種情況下可能出現很詭異的問題，具體參考：

標準布局常見問題及解決辦法

標準布局常見問題及解決辦法

標準布局常見問題及解決辦法

oracle常見問題及解決辦法

相關推薦