快速定位頁面中複雜 CSS BUG

快速定位頁面中複雜 CSS BUG

作者：blank　時間： 2009-01-16　文件類型：原創　來自：藍色理想

相信大家對於常見 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 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》 快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。 6、邊框背景調試法 故名思議就是給元素設定顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試 CSS BUG 的方法之一，對於複雜 BUG 依舊適用。經濟實惠還環保^^ 最後想給大家強調一點的是，養成良好的書寫習慣，減少額外標籤，盡量語義，符合標準，其實可以為我們減少很多額外的複雜 CSS BUG，更多的時候其實是我們自己給自己製造了麻煩。