標準布局常見問題及解決辦法_經驗交流

需要標準布局的朋友，經常會遇到一些問題，下面是一些布局問題

• 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支援<!--[if IE]>這種寫法，可以專門針對IE來寫單獨的樣式，所以可以把這個屬性寫在頁面內的<!--[if IE]>中，這樣應該可以通過驗證了

• 相對定位與絕對位置

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

• IE6雙倍邊距bug

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

