css樣式設計時快速定位bug的幾個好方法

在DIV+CSS模板設計中，檢測尋找CSS中的BUG無疑是一件痛苦的事情，下面一些經驗或許可以協助你更快的找出CSS中的BUG並進行修補！

1、檢查是否清除浮動

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

2、檢查 IE 下是否觸發 haslayout

很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）

快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。

3、邊框背景調試法

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

4、檢查頁面的標籤是否閉合

不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源於這裡。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。

快捷提示：可以用 Dreamweaver 開啟檔案檢查，一般沒有閉合的標籤，會黃色背景高亮。

5、樣式排除法

有些複雜的頁面也許載入了 N 個外鏈 CSS 檔案，那麼逐個刪除 CSS 檔案，找到 BUG 觸發的具體 CSS 檔案，縮小鎖定的範圍。

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

6、模組確認法

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

希望上面的一些辦法能夠在div+css設計中協助到你！

 

原文：http://www.zhuyew.net/a/div_css/div_css_layout/20110716/451.html 

這個網站挺不錯的，至少我看到的文章都很實用，是平時總結的一些經驗，比其他網上的文章寫的靠譜多了。