快速找出CSS中的BUG

常見的 CSS BUG處理方法有：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等，但時常我們也會碰到複雜的 CSS BUG 問題，我們會遇到此類觸發的條件很複雜，而“BUG” 也並非指一定是瀏覽器的 BUG。所以，我們首先要解決的是如何定位到問題，只有快速的定位到問題，才能更好的解決。

1、檢查頁面的標籤是否閉合 不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源於這裡。畢竟頁面的模板一般都是由開發來巢狀的，而他們很容易犯此類問題。 快捷提示：可以用 Dreamweaver 開啟檔案檢查，一般沒有閉合的標籤，會黃色背景高亮。

2、樣式排除法 有些複雜的頁面也許載入了 N 個外鏈 CSS 檔案，那麼逐個刪除 CSS 檔案，找到 BUG 觸發的具體 CSS 檔案，縮小鎖定的範圍。對於剛才鎖定的問題 CSS 樣式檔案，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。

3、模組確認法 有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模組，尋找到觸發問題的 HTML 模組。

4、檢查是否清除浮動 其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用無額外 HTML 標籤的清除浮動的方法（儘量避免使用overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。

5、檢查 IE 下是否觸發 haslayout 很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。 快捷提示：如果觸發了 haslayout，IE 的除錯工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。

6、邊框背景除錯法 故名思議就是給元素設定顯眼的邊框或者背景（一般黑色或紅色），進行除錯。此方法是最常用的除錯 CSS BUG 的方法之一，對於複雜 BUG 依舊適用。經濟實惠還環保。

本文為Anyforweb前端分享部落格，需要了解網站建設相關，請訪問anyforweb.com。