網頁規劃 CSS布局調試的有用辦法

網頁規劃中CSS布局是很重要的部分，下面介紹幾種查看調試CSS布局的有用辦法。

1. 查看HTML元素是否有拼寫過錯、是否忘掉完畢符號

即使是內行也經常會弄錯div的嵌套關系。能夠用dreamweaver的驗證功能查看一下有無過錯。

2. 查看CSS是否書寫正確

查看一下有無拼寫過錯、是否忘掉結尾的 } 等。能夠使用CleanCSS來查看 CSS的拼寫過錯。CleanCSS本是為CSS瘦身的東西，但也能查看出拼寫過錯。

3. 用刪去法確定過錯發作的方位

如果過錯影響了全體布局，則能夠逐一刪去div塊，直到刪去某個div塊后顯現恢復正常，即可確定過錯發作的方位。

4. 使用border特點確定犯錯元素的布局特性

使用float特點布局一不小心就會犯錯。這時為元素增加border特點確定元素鴻溝，過錯原因即真相大白。

5. float元素的父元素不能指定clear特點

MacIE下如果對float的元素的父元素使用clear特點，周圍的float元素布局就會紊亂。這是MacIE的聞名的bug，假使不知道就會走彎路。

6. float元素務必指定width特點

很多瀏覽器在顯現未指定width的float元素時會有bug。所以不論float元素的內容如何，一定要為其指定width特點。

別的指定元素時盡量使用em而不是px做單位。

7. float元素不能指定margin和padding等特點

IE在顯現指定了margin和padding的float元素時有bug。因而不要對float元素指定margin和padding特點（能夠在float元素內部嵌套一個div來設置margin和padding）。也能夠使用hack辦法為IE指定特別的值。

8. float元素的寬度之和要小于100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯現。因而請保證寬度之和小于99%。

9. 是否重設了默許的款式？

某些特點如margin、padding等，不同瀏覽器會有不同的解釋。因而最好在開發前首先將全體的margin、padding設置為0、列表款式設置為none等。

10. 是否忘掉了寫DTD？

如果無論怎樣調整不同瀏覽器顯現結果還是不一樣，那么能夠查看一下頁面最初是不是忘了寫下面這行DTD：

http://www.w3.org/TR/html4/loose.dtd“》