DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css布局的常見問題及解決
css布局的常見問題及解決
編輯:CSS詳解     

float的3像素問題及解決辦法

當使用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;}

上邊容器浮動後,下邊的容器跟著浮動,造成頁面錯亂

 

如圖中布局所示: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支持<!–[if IE]>這種寫法,可以專門針對IE來寫單獨的樣式,所以可以把這個屬性寫在頁面內的<!–[if IE]>中,這樣應該可以通過驗證了

css布局的相對定位與絕對定位

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved