CSS如何排查錯誤？從哪入手

2024-07-11 08:53:06

字體：大中小

來源：轉載

供稿：網友

一、檢查代碼單詞有沒有錯誤?html標簽是否閉合?

我們在進行網頁設計的時候，html語言規范是首尾要閉合，如果僅僅寫一個頭< head >，那么末尾就應該有< /head >這樣代碼來完成整改網頁頭部的設計!可是很多設計師因為粗心大意，往往只寫了一個頭部，卻忽略了閉合，導致CSS BUG的出現!當然這是在記事本下編寫網頁會出現的，現在只要使用一些專業的網頁設計軟件，比如frontpage，dreamweaver等等，代碼的部分會通過顏色的提醒，不過對于某些設計師來說，第一次容易粗心大意，經過二次檢查往往會能夠避免，當然，更多的網頁設計師在設計網頁的時候，將css代碼的單詞少寫了一個字母!所以這往往是導致出現CSS BUG問題的重要原因!

二、樣式排除法

有些復雜的頁面也許加載了 N 個外鏈 CSS 文件，那么逐個刪除 CSS 文件，找到 BUG 觸發的具體 CSS 文件，縮小鎖定的范圍。

對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。

三、檢查是否有合適的DTD

不同的DOCTYPE直接影響瀏覽器對于(X)HTML和CSS的解釋。

四、檢查CSS屬性瀏覽器是否支持

雖然現代瀏覽器支持絕大部分的CSS 2.1規范和部分的CSS 3規范，但是在前面的章節也介紹過，有一些CSS屬性還沒有被瀏覽器廣泛支持，因此在某個屬性沒有生效的時候，請確定瀏覽器是否支持。

五、隔離問題

1、將有問題的地方突出出來，例如給元素加一個醒目的邊框或者背景顏色。
2、如果增加了邊框就可以解決問題，那么就是邊距重疊的問題。
3、如果增加了背景，但是背景不顯示，那么有可能是特殊性或者浮動元素沒有閉合。
4、嘗試修改一些屬性，特別是會觸發IE的hasLayout的屬性，判斷是否是IE常見的Bug。

上一篇：淘寶導航欄css代碼分享

下一篇：css和js實現瀑布流效果示例