DIV+CSS頁面配置中BUG解決方案

來源:互聯網
上載者:User

  DIV+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 依舊適用。經濟實惠還環保^^

  本文章由深圳思途科技有限公司(http://www.sietoo.com)提供,轉載請註明出處!

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.