紅河州領先的互聯網服務提供商
以技術為后盾 以服務求發展
首頁 >> 知識寶庫 >> 網頁設計 >> 信息內容

筆記:DIV+CSS網頁布局常見問題及解決辦法

1、div浮動左(下)面多出幾像素,辦法:浮動中加:display:inline(IE6的BUG,margin在碰到float時會距離會加倍,也在浮動元素中加display:inline即可)

2、FF瀏覽器div內有浮動,頂部多出幾像素,辦法:在浮動外div中加:display:inline

3、有浮動內容的div在IE6下始終多出幾像素空白,辦法:加一行div,屬性設置為:clear:both; height:0; line-height:0; font-size:0;

4、徹底清除浮動:.Clear{clear:both; font-size:0; height:0; line-height:0;}
5、拖動滾動條時邊框IE時隱時現,辦法:在邊框的div中加overflow:hidden; height:100%(IE6.0)

6、li里直接使用img,底部多出幾像素,辦法:在img中加display:block

7、ul中的li設置float:left后,li內的文字會換行,解決方法:li中加li {      float: left;      white-space: nowrap;即可

值描述normal默認??瞻讜粸g覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。nowrap文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。pre-wrap保留空白符序列,但是正常地進行換行。pre-line合并空白符序列,但是保留換行符。inherit規定應該從父元素繼承 white-space 屬性的值。  

8、img底部多出幾像素,方法,在img元素加屬性float:left屬性;  

9、在做一個后臺布局是用到Tab切換,切換的內容是表格布局的數據,但發現火狐下切換時單元格寬度不能正常顯示。(布局時,我在第二個開始的Tab內容加了.Hidden{display:none;}這個class,切換Js設置display屬性)。解決辦法:將class—Hidden去掉,換成style="display:none;"即可;原來是這個class在作怪。

10、CSS注釋,在IE7 FIREFOX下運行正常,在IE6下面竟然一個CSS里設定的格式都么有顯示出來。把注釋去掉就顯示正常了。如果沒要用中文注釋請將注釋改成/*這里是注釋內容**********/ 這樣就可以顯示了

11、解決使用了float后IE6下li高度比Firefox或者IE8高的問題:在ul的樣式表中增加了zoom:1就ok了  

12、要使float元素li不折行,這樣做:
    li
    {
        float:left;
        padding-right:16px;
        white-space: nowrap;
       display:inline-block; (不能加overflow:hidden;)
    }

(已被查看 人次)
分享到:

正規網絡公司

專業的系統開發公司

紅河本地化服務

您身邊的網絡服務專家

100%正版授權

全套自主開發授權使用

按需求定制開發

滿足您各種開發需求

完善售后服務

7×24小時·極速響應

亚洲中文无码亚洲人成影院