快速定位頁面中復(fù)雜 CSS BUG

2020-03-24 16:39:35

字體：大中小

供稿：網(wǎng)友

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

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS實現(xiàn)大型下拉菜單步驟詳解

下一篇：CSS實例-CSS制作的像素圖