返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

DIV布局常見錯誤匯總

時間:2018-12-28 13:31來源:知行網www.aotfjk.live 編輯:麥田守望者

使用DIV布局時還帶有不少操作表格時的思想和習慣,以至于出了不少的錯誤,在此把容易出錯的一些細節整理出來,希望對初學的朋友能有所幫助。

1.最常見的DIV嵌套錯誤

因為Xhtml 語法比較嚴格,諸如Firefox 之類的瀏覽器如果檢查發現Xhtml里面有語法錯誤,那頁面是不能正常顯示的。剛剛開始學習DIV布局的時候經常會弄錯DIV的嵌套關系。我們可以用Dreamweaver的驗證功能檢查一下有無這方面的錯誤。
 

2.由于粗心造成的標點錯誤
開始一味追求速度,在標點方面不太注意,到最后發現有些屬性不起作用。最容易出錯的例如:
正確:class=” “,錯誤:class=“ ”(標點的中英文切換)
正確:font-size: 12px;,錯誤:font-size: 12px;(標點的中英文切換)
正確:text-decoration: underline;,錯誤:text_decoration: underline;(是中劃線而非下劃線)
正確:img {border: 0;}錯誤:img {border: 0; (注意后邊的”}”符號)
正確:<br /><img /><hr />錯誤:<br><img><hr>(這個錯誤只是個不好的習慣,不符合標準的寫法,這種單標簽一定要閉合)

3.在使用float元素時出現內容撐開的問題
在使用左浮動或者右浮動的時候一定要保證float元素的寬度之和小于或者等于100%,一般比較保險的做法是要小于98%。

4.float元素的父元素不能指定clear屬性
在MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素布局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。

5.重新定義一些默認的樣式
某些屬性如ul、li、margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開始布局之前先將全體的margin、padding設置為0;ul、li列表樣式設置為none等。

6.float元素最好不要指定margin和padding屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(合理的做法:可在float元素內部嵌套一個div來設置margin和padding)。

7.float元素一定要指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要為其指定width屬性。

8. 是否忘記了寫DTD
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那么可以檢查一下頁面開頭是不是忘了寫下面這行DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

最好的做法是用Dreamweaver專業軟件直接新建網站頁面,這樣可以保證不會出錯。

簡單的排除錯誤的一些方法:

  1. 大概確定錯誤發生的位置
    如果因為小錯誤影響了整體布局,可以逐個刪除div塊,直到刪除某個div塊后顯示恢復正常,即可確定錯誤發生的位置。
  2. 利用border屬性解決Float布局錯誤
    使用float屬性布局一不小心就會出錯。這時為相關元素添加border屬性以確定元素邊界,錯誤原因即水落石出。
------分隔線----------------------------
標簽(Tag):DIV布局
------分隔線----------------------------
推薦內容
猜你感興趣
湖南刘雪龙黑彩