CSS如何排查錯(cuò)誤？從哪入手

2024-07-11 08:31:04

字體：大中小

供稿：網(wǎng)友

一、檢查代碼單詞有沒有錯(cuò)誤?html標(biāo)簽是否閉合?

我們?cè)谶M(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候，html語言規(guī)范是首尾要閉合，如果僅僅寫一個(gè)頭< head >，那么末尾就應(yīng)該有< /head >這樣代碼來完成整改網(wǎng)頁頭部的設(shè)計(jì)!可是很多設(shè)計(jì)師因?yàn)榇中拇笠猓粚懥艘粋€(gè)頭部，卻忽略了閉合，導(dǎo)致CSS BUG的出現(xiàn)!當(dāng)然這是在記事本下編寫網(wǎng)頁會(huì)出現(xiàn)的，現(xiàn)在只要使用一些專業(yè)的網(wǎng)頁設(shè)計(jì)軟件，比如frontpage，dreamweaver等等，代碼的部分會(huì)通過顏色的提醒，不過對(duì)于某些設(shè)計(jì)師來說，第一次容易粗心大意，經(jīng)過二次檢查往往會(huì)能夠避免，當(dāng)然，更多的網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁的時(shí)候，將css代碼的單詞少寫了一個(gè)字母!所以這往往是導(dǎo)致出現(xiàn)CSS BUG問題的重要原因!

二、樣式排除法

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

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

三、檢查是否有合適的DTD

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

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

雖然現(xiàn)代瀏覽器支持絕大部分的CSS 2.1規(guī)范和部分的CSS 3規(guī)范，但是在前面的章節(jié)也介紹過，有一些CSS屬性還沒有被瀏覽器廣泛支持，因此在某個(gè)屬性沒有生效的時(shí)候，請(qǐng)確定瀏覽器是否支持。

五、隔離問題

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

上一篇：CSS3 Columns分列式布局方法簡(jiǎn)介

下一篇：css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第一部分