標準布局常見問題及解決辦法
更新時間:2008年11月17日 12:48:01 作者:
需要標準布局的朋友,經(jīng)常會遇到一些問題,下面是一些布局問題
- CSS2.0盒模型層次平面示意圖和3D示意圖
- 3像素問題及解決辦法
- 當使用float浮動容器后,在IE6下會產(chǎn)生3px的空隙,有意思的是右側(cè)容器沒設置高度時3px在右側(cè)容器內(nèi)部,當設定高度后又跑到容器的左側(cè)了,所以對布局精度要求高的話,請參考例29、31的解決方法
- 上邊容器浮動后,下邊的容器跟著浮動,造成頁面錯亂
- 如以上例子中的footer必須要單獨占一行,但當sidebar浮動后,content的高度小于sidebar的高度時,footer也跟著浮動到sidebar右側(cè)了,造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器,設置樣式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使頁面正常
- 當子元素浮動且未知高度時,怎么使父容器適應子元素的高度?
- 這種情況可在父窗口加上 overflow:auto;zoom:1;這兩個樣式屬性,overflow:auto;是讓父容器來自適應內(nèi)部容器的高度,zoom:1;是為了兼容IE6而使用的CSS HACK。zoom:1;通不過W3C的驗證,這也是遺憾的一點,幸好IE支持<!--[if IE]>這種寫法,可以專門針對IE來寫單獨的樣式,所以可以把這個屬性寫在頁面內(nèi)的<!--[if IE]>中,這樣應該可以通過驗證了
- 相對定位與絕對定位
- 規(guī)劃頁面時,許多時候需要用到相對定位或絕對定位,這里邊有個技巧,掌握后有些地方就不用繁冗的js了。就是當父容器使用相對定位后,此時子元素再使用絕對定位,位置是相對于父元素。如果父元素沒有定位,那么子元素的絕對定位是相對于瀏覽器
- IE6雙倍邊距bug
- 當頁面內(nèi)有多個連續(xù)浮動時,如本頁的圖標列表是采用左浮動,此時設置li的左側(cè)margin值時,在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設置為10px,而左側(cè)則呈現(xiàn)出20px,解決它的方法是在浮動元素上加上display:inline;的樣式,這樣就可避免雙倍邊距bug
相關文章
CSS expression控制圖片自動縮放效果代碼[兼容 IE,Firefox]
一直以來有個很頭疼的問題困擾著我,那就是圖片縮放的問題,寫到 JS 里面吧,不太容易修改。寫到 CSS 里面吧,IE 6 又不支持 max-width2008-09-09js開發(fā)中的頁面、屏幕、瀏覽器的位置原理(高度寬度)說明講解(附圖)
前端js開發(fā)中我們常遇到對頁面、屏幕、瀏覽器寬高和位置的獲取問題,有時間查到了js的實現(xiàn)代碼,但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁面的高度、寬度信息。2023-02-02