CSSBUG處理方法大全以及使用CSS的最佳習(xí)慣_html/css_WEB-ITnose

CSS BUG在dedecms.com介紹過也很多，也一直困擾著大家，在CSS布局中會常遇到這樣的問題。相信大家對于常見 CSS BUG 的處理已經(jīng)相對比較熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 Doubled Float-Margin Bug（雙倍邊距的bug） 等等。但時常我們也會碰到復(fù)雜的 CSS BUG 問題，所謂“復(fù)雜”實(shí)質(zhì)是指觸發(fā)的條件很復(fù)雜，而“BUG” 也并非指一定是瀏覽器的 BUG 。對于此類問題，我們首先要解決的是如何定位到問題，只有快速的定位到問題，才能更好的解決問題。
　　對于快速定位，個人的經(jīng)驗(yàn)處理一般如下（基本可以定位到我在 淘寶 遇到的 90% 以上的復(fù)雜 CSS BUG 問題）：

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

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

三、模塊確認(rèn)法
　　有時候我們也可以從頁面的 HTML 元素出發(fā)。刪除頁面中不同的 HTML 模塊，尋找到觸發(fā)問題的 HTML 模塊。

四、檢查是否清除浮動
　　其實(shí)有不少的 CSS BUG 問題是因?yàn)闆]有清除浮動造成的。養(yǎng)成良好的清除浮動的習(xí)慣是必要的，推薦使用 無額外 HTML 標(biāo)簽的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。

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

六、邊框背景調(diào)試法
　　故名思議就是給元素設(shè)置顯眼的邊框或者背景（一般黑色或紅色），進(jìn)行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一，對于復(fù)雜 BUG 依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保^^
　　最后想給大家強(qiáng)調(diào)一點(diǎn)的是，養(yǎng)成良好的書寫習(xí)慣，減少額外標(biāo)簽，盡量語義，符合標(biāo)準(zhǔn)，其實(shí)可以為我們減少很多額外的復(fù)雜 CSS BUG，更多的時候其實(shí)是我們自己給自己制造了麻煩。希望大家遠(yuǎn)離 BUG ，生活越來越美好。

大多數(shù)技術(shù)都有自己約定俗成的標(biāo)準(zhǔn)。CSS也不例外。雖然并非網(wǎng)絡(luò)上存在的所有CSS都很規(guī)范，但按照現(xiàn)有標(biāo)準(zhǔn)來使用CSS卻還是不無裨益的。一般來說，開發(fā)人員應(yīng)盡可能將內(nèi)容與結(jié)構(gòu)分離開來。這樣做的好處在于：

1：增加站點(diǎn)的壽命

不規(guī)范的樣式表可能在當(dāng)時覺得很方便，但新版本的瀏覽器出來以后，很可能就會出現(xiàn)兼容性問題。到時逐頁修改站點(diǎn)就是一項(xiàng)非常費(fèi)時的工作同時也使使用CSS失去了意義。

2：讓你的站點(diǎn)對所有的用戶以及瀏覽器都適用。

有些地方的政府已經(jīng)立法要求網(wǎng)站必須讓殘障人士也同樣可以瀏覽。為殘障認(rèn)識設(shè)計(jì)的瀏覽設(shè)備，比如聽力瀏覽器，對CSS規(guī)范性要求極其嚴(yán)格。

3：讓站點(diǎn)更新和維護(hù)更加輕松。

使用方式得當(dāng)?shù)脑挘珻SS可讓你在一個頁面中的調(diào)整快速應(yīng)用到所有頁面中去。

你首先要做的選擇是使用哪一種樣式表。當(dāng)涉及到最佳習(xí)慣時，對不同樣式表的分析如下：

Inline CSS;簡單地說，你應(yīng)該盡量避免使用。除了一些其他的缺點(diǎn)之外，使用Inline CSS意味著你并沒有利用到CSS的真正優(yōu)點(diǎn)，即你并沒有將內(nèi)容與結(jié)構(gòu)分離開。DW MX使用Inline CSS主要是為了定位頁面元素(這些元素在DW MX的用戶界面中稱為“層(layer)”)，或者為了使用某個DHTML特效，它需要使用Inline 樣式的Javascript來改變一個對象的屬性。

Embedded CSS：它也不是最理想的，因?yàn)樗荒軐Ξ?dāng)前頁面施加影響。在更新的過程中，如果某一個頁面丟失，將會使站點(diǎn)的風(fēng)格不一致;另外，當(dāng)用戶瀏覽你的站點(diǎn)時，每一頁都要下載一次樣式表信息。

External CSS：這是你的第一選擇。External CSS可以讓所有連接到它的頁面保持一致的外觀風(fēng)格;提綱挈領(lǐng)，更改一次，輕松更新所有相關(guān)頁面;讓你的頁面體積更小，瀏覽速度更快。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com