CSS調試技巧五則，兼談“提問的藝術”

文章目錄

• 技巧1：設定背景色或者邊框，確認錯誤範圍
• 技巧2：刪除無關代碼，暴露核心矛盾
• 技巧3：先用Firefox調試，然後使它相容IE
• 技巧4：善於利用工具，提高調試效率
• 技巧5：善於提問，尋求協助

CSS開始進入布局領域，並逐漸開始廣泛地被使用，越來越多的設計師轉向CSS，然而隨著使用的逐步深入，會發現使用CSS的一個問題是，懂得越多，遇到的問題就越多。在實際製做網站的時候，總會遇到以前沒有碰到過的新問題。就好像我們學了十幾年的英語，單詞、文法都背了一大堆，但是真到用的時候，還是總遇到不會說的東西。

實際上這還是學習途中的一個階段，算是成長的煩惱。畢竟每解決一個問題，功力就會精進一層。因此，除了徹底把CSS的原理搞清楚之外，就要儘可能多地實踐，解決實際問題，這樣終歸是可以把問題都解決的。

在實踐中，最關鍵的問題就是如何調試，也就是在遇到頁面表現和預想的不一樣的時候，怎麼找到問題的關鍵。當然，前提是你對你寫的代碼基本上是清楚的，否則談不上調試。

對於CSS而言，本質就是大大小小的盒子在頁面上擺放，你不是設計師，而是排字工人，你眼中看到的不是文字，不是映像，就是一堆盒子！你要考慮的就是盒子與盒子之間的關係！標準流？並列？上下？嵌套？間隔？背景？浮動？絕對？相對？定位基準？等等等等……

技巧1：設定背景色或者邊框，確認錯誤範圍

歸根到底，任何排版上的錯誤，都是由於你認為某個盒子應該在的位置和瀏覽器認為的位置不同，所以如果你本身就是瀏覽器，一切錯誤都不會出現。

因此，每當你發現表現頁面不如你意的時候，比如希望在左邊跑到右邊了，希望在一行的變成兩行了等等，都首先明確每個盒子的範圍，這時你可以通過臨時給盒子設定背景色，或者設定一個1像素邊框的方法，清楚地瞭解瀏覽器認為和盒子範圍和你認為的盒子範圍是否一致。如果可以設定背景色最好使用背景色，因為設定邊框會改變布局，這就好像我們使用溫度表測量溫度，前提是認為溫度表本身不會影響被測物體的溫度，實際上物理學告訴我們，任何兩個物體都是相互影響的，即所謂測不準原理。但有時對於複雜的頁面，背景色可能無法看出範圍，還是需要使用邊框來完成這項任務，但你要排除增加的臨時邊框引入新的問題的可能性。

當某個盒子的範圍不是你所希望的，恭喜你，你已經找到錯誤所在了，接下來就是分析為什麼瀏覽器要把它放在這裡，而不是按照你的意願去放置？你經過這一步仔細計算，你的所有代碼都是符合CSS規範的，那麼你需要確認這是瀏覽器錯了，而不是你錯了。不過你應該相信，99%的可能是你粗心算錯了，1%的可能是瀏覽器有錯誤。就好像你回憶一下，上學時參加過的所有考試，老師確實有時會把你答對的題目判錯，但是這種機率很低。

技巧2：刪除無關代碼，暴露核心矛盾

經過上一步的排查，你已經懷疑瀏覽器有問題了，那麼就需要確認這一點。而這時你的網頁很可能很複雜，內容很多，各種因素互相影響，都會干擾你的判斷。解決方案就是把僅和你有問題的部分相關的代碼提取出來，或者把無關代碼全部刪除，總之目的就是儘可能找到出現問題的最小代碼集合，這樣你才能找到問題的本質原因。事實上，很多情況下，從一個複雜的網頁一點點刪除代碼的過程中，你的問題就解決了，這樣你一定要注意，刪了哪些代碼，你的問題就解決了，這就是問題的原因，如果你是個聰明人，一定要把這個問題真正搞懂，不要只管結果，不問為什麼。遇事多問幾個為什麼，你的提高會快得多。

事實上，調試能力是非常重要的，任何人在實際工作中，肯定都會遇到做出來的效果和自己希望的不一致的情況，這時就要看調試能力了。

就好像，家裡停電了，你一定會首先出門看看鄰居家的是不是有電，這樣就判斷出問題出在自己家裡，還是整個樓停電了。如果整個樓都停電了，那就只有等了；如果只是自己家停電了，那就要再分析一下是不是哪裡短路了（比如水灑在電線上了），或者有什麼電器過載了（比如你把家裡的所有空調、熱水器、電火鍋這些東西都開啟了），等等，這實際上就是在確定故障點，道理和作頁面是完全類似的，第一步就是縮小範圍，只是你可能沒有意識到。因此，你可以把生活中的一些道理，移植過來，很多問題就好解決了。（如果一出問題，就找物業的人來修，應該是比較適合做領導的人，呵呵。）

技巧3：先用Firefox調試，然後使它相容IE

關於Firefox和IE的差異問題，已經談過很多了，這裡不再細說，總之原則就是，Firefox對CSS規範遵守的最好，調試的時候先用Firefox調試，然後再使網頁相容IE；其次，不要在一種瀏覽器完全做好以後，再用瀏覽器調試，而是每一步都保證在各瀏覽器中這個正確顯示。

技巧4：善於利用工具，提高調試效率

這裡要說的是兩個非常方便的工具，他們都是以Firefox的外掛程式形式存在的，分別是“Web Developer Toobar”和“Firebug”。當然，他們都不能向傻瓜相機一樣，只要按一下快門，就告訴你問題出在哪裡。他們的作用都是可以協助你儘可能方便地瞭解瀏覽器是如何看待你的代碼的。比如，通過他們，可以方便地查看每一個盒子的範圍，不需要你在人為地設定邊框了，通過Firebug，可以即時動態地修改CSS屬性設定，這都可以大大提高你調試的效率。這裡暫時沒有篇幅來講解這兩個工具的用法了，有興趣的讀者可以先查一查相關的介紹。

技巧5：善於提問，尋求協助

互連網出現了，這個偉大的傢伙給我們帶來了太多的方便。有了Google，我們可以尋找答案，有了各種網站論壇，我們可以去向別人請教，這都是我們學習的最好途徑。但是有一點，這也需要一些提問的技巧和藝術。這裡給您的建議就是，在提問之前，一定要按照前面說的幾點，自己親自研究過你的問題，你的問題可以用一兩句話很具體地說明，可以配有簡潔的代碼，使看到你的問題的人，可以很容易理解你的問題，並“重現”你的問題。這一點非常重要，千萬不要把大段大段的代碼，貼到某個論壇上，那樣你得到協助的機會會變得小得多。你要相信，熱心人固然是很多的，但是熱心到能夠花很多時間一點點分析你的大段大段代碼，然後大海撈針一樣地找出某個地方存在問題的熱心人就不多了。事實上，這些功課是你應該提前做好的，你至少應該儘可能縮小問題的範圍，到一個合理的程度。互連網、Google、論壇都是工具，也僅僅是一個工具，誰能用得好，誰就能獲得更快的提高，關鍵還是要看使用工具的主人。