DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS BUG問題解決的一些經驗
CSS BUG問題解決的一些經驗
編輯:CSS詳解     

CSS BUG在webjx.com介紹過也很多,也一直困擾著大家,在CSS布局中會常遇到這樣的問題。相信大家對於常見 CSS BUG 的處理已經相對比較熟悉,例如:IE6 Three Pixel Gap(3px bug)、IE5/6 Doubled Float-Margin Bug(雙倍邊距的bug) 等等。但時常我們也會碰到復雜的 CSS BUG 問題,所謂“復雜”實質是指觸發的條件很復雜,而“BUG” 也並非指一定是浏覽器的 BUG 。對於此類問題,我們首先要解決的是如何定位到問題,只有快速的定位到問題,才能更好的解決問題。

  對於快速定位,個人的經驗處理一般如下(基本可以定位到我在 淘寶 遇到的 90% 以上的復雜 CSS BUG 問題):

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

二、樣式排除法
  有些復雜的頁面也許加載了 N 個外鏈 CSS 文件,那麼逐個刪除 CSS 文件,找到 BUG 觸發的具體 CSS 文件,縮小鎖定的范圍。
  對於剛才鎖定的問題 CSS 樣式文件,逐行刪除具體的樣式定義,定位到具體的觸發樣式定義,甚至是具體的觸發樣式屬性。

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

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

五、檢查 IE 下是否觸發 haslayout
  很多的 IE 下復雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理復雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》(如果無法翻越穿越偉大的 GFW,可閱讀 藍色上的轉帖 ) 
  快捷提示:如果觸發了 haslayout,IE 的調試工具Internet Explorer Developer Toolbar中的屬性中將會顯示 haslayout 值為 -1。

六、邊框背景調試法
  故名思議就是給元素設置顯眼的邊框或者背景(一般黑色或紅色),進行調試。此方法是最常用的調試 CSS BUG 的方法之一,對於復雜 BUG 依舊適用。經濟實惠還環保^^
  最後想給大家強調一點的是,養成良好的書寫習慣,減少額外標簽,盡量語義,符合標准,其實可以為我們減少很多額外的復雜 CSS BUG,更多的時候其實是我們自己給自己制造了麻煩。希望大家遠離 BUG ,生活越來越美好。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved