CSS BUG問題解決的一些經驗
2024-07-11 08:44:13
供稿：網友
CSS BUG在VeVb.com介紹過也很多，也一直困擾著大家，在CSS布局中會常遇到這樣的問題。相信大家對于常見 CSS BUG 的處理已經相對比較熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 Doubled Float-Margin Bug（雙倍邊距的bug） 等等。但時常我們也會碰到復雜的 CSS
CSSBUG在VeVb.com介紹過也很多，也一直困擾著大家，在CSS布局中會常遇到這樣的問題。相信大家對于常見CSSBUG的處理已經相對比較熟悉，例如：IE6ThreePixelGap（3pxbug）、IE5/6DoubledFloat-MarginBug（雙倍邊距的bug）等等。但時常我們也會碰到復雜的CSSBUG問題，所謂“復雜”實質是指觸發的條件很復雜，而“BUG”也并非指一定是瀏覽器的BUG。對于此類問題，我們首先要解決的是如何定位到問題，只有快速的定位到問題，才能更好的解決問題。
對于快速定位，個人的經驗處理一般如下（基本可以定位到我在淘寶遇到的90%以上的復雜CSSBUG問題）：
一、檢查頁面的標簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的CSSBUG問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用Dreamweaver打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。
二、樣式排除法
有些復雜的頁面也許加載了N個外鏈CSS文件，那么逐個刪除CSS文件，找到BUG觸發的具體CSS文件，縮小鎖定的范圍。
對于剛才鎖定的問題CSS樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。
三、模塊確認法
有時候我們也可以從頁面的HTML元素出發。刪除頁面中不同的HTML模塊，尋找到觸發問題的HTML模塊。
四、檢查是否清除浮動
其實有不少的CSSBUG問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用無額外HTML標簽的清除浮動的方法（盡量避免使用overflow:hidden;zoom:1的類似方法來清除浮動，會有太多的限制性）。
五、檢查IE下是否觸發haslayout
很多的IE下復雜CSSBUG都與IE特有的haslayout息息相關。熟悉和理解haslayout對于處理復雜的CSSBUG會事半功倍。推薦閱讀old9翻譯的《Onhavinglayout》（如果無法翻越穿越偉大的GFW，可閱讀藍色上的轉帖）
快捷提示：如果觸發了haslayout，IE的調試工具InternetExplorerDeveloperToolbar中的屬性中將會顯示haslayout值為-1。
六、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試CSSBUG的方法之一，對于復雜BUG依舊適用。經濟實惠還環保^^
最后想給大家強調一點的是，養成良好的書寫習慣，減少額外標簽，盡量語義，符合標準，其實可以為我們減少很多額外的復雜CSSBUG，更多的時候其實是我們自己給自己制造了麻煩。希望大家遠離BUG，生活越來越美好。
