相信大家對于常見CSS BUG的處理已經相對比較熟悉，例如：IE6 Three PixeLGap、IE5/6 Doubled Float-Margin Bug等等。但時常我們也會碰到復雜的CSS BUG問題，所謂“復雜”實質是指觸發的條件很復雜，而“BUG” 也并非指一定是瀏覽器的BUG 。對于此類問題，我們首先要解決的是如何定位到問題，只有快速的定位到問題，才能更好的解決問題。

對于快速定位，個人的經驗處理一般如下（基本可以定位到我在 淘寶 遇到的 90% 以上的復雜CSS 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 翻譯的 《OnHaving layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）

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

6、邊框背景調試法

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

最后想給大家強調一點的是，養成良好的書寫習慣，減少額外標簽，盡量語義，符合標準，其實可以為我們減少很多額外的復雜CSS BUG，更多的時候其實是我們自己給自己制造了麻煩。希望大家遠離 BUG ，生活越來越美好。

當前名稱：怎樣查找頁面中的CSSbug
轉載來源：http://www.js-pz168.com/news14/321714.html

成都網站建設公司_創新互聯，為您提供自適應網站、品牌網站建設、企業網站制作、移動網站建設、網頁設計公司、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯