我這樣來解決CSS的Bug

來源:互聯網
上載者:User

做項目多了。慢慢體會到的是:依據合理的語義化,恰當的文檔流,正確的標準化所生產出來的頁面,在各個公司出品的標準渲染的瀏覽器下,一般是不需要有太多的hack來解決相容性的問題。同樣也包括不那麼特別標準的IE 6。

1.合理的語義化:合理使用tag標記。大家對於語義的理解都不一樣,除了那些顯而易見可以更合理的標籤外,完全沒有必要一定爭論出一個高下,而且也很難有一個結果。然後就是注意最基礎的,block和inline元素的嵌套順序。

2.恰當的文檔流:我們回過頭重新來看一下瀏覽器的渲染,每本介紹CSS的書中,都會提到文檔流。sorry,我沒有找到w3c上面最原始的出處,但是有找到CSS中三種最基本的定位機制:普通流(normal flow)、浮動(float)、絕對位置。我們可以參考這篇文章:http://www.w3.org/TR/CSS2/visuren.html。正確理解了上面這些之後,就不會出現“凡事都讓所有的元素給float起來,定位就正確了”的惡習。

3.haslayout:ie下一切萬惡的根源都歸結到layout上面去。請反覆的去看這個概念。

步驟

A.預查:

1.核查是否引入了正確的css。用firebug很容易就可以查到。

2.html標籤是否未閉合。用dreamweaver也很容易就可以確認,如果dreamweaver出問題,那麼就只能手工來檢查,或者考慮寫一個指令碼來進列標籤匹配驗證。

B.常見問題核查

1.檢查是否需要清除浮動。

2.嘗試將父容器加上overflow:hidden。

3.觸發haslayout屬性。注意:這雷根據經驗,可以嘗試觸發父容器及其中的子容器的haslayout屬性。通常情況下,如果是因為layout的原因,在ff下會表現正常,ie下會出現錯誤。

4.如果和coding時預期的布局不一樣,那麼請重新反思代碼結構。是不是盒模型的概念錯了,文檔流是否正確。分析問題所在的文檔流(或者說定位機制),是否符合標準。可以通過設定不同顏色的background及border來輔助分析。這點的分析必須建立在對定位機制的反覆理解上。

5.神秘的空隙。一般和line-height,font-size,vertical-align有關,或者刪除原代碼中的空格。

C.如果問題還存在

如果通過上述方法還未能解決css的bug問題,那就bug比較複雜了。需要:

1.精簡不必要的HTML,逐段刪除html,找到是因為哪段html的影響導致的,然後重複B步驟

2.同上,精簡css。以上兩端的原因是:有時候css的bug出問題的哪段代碼未必是錯誤的,有可能是因為他附近的代碼的影響。

3.同B4步驟,早期的時候遇到過很多問題,到最後回頭再來看,卻發現用合理的html結構(或者更符合語義的),往往就不會有相容性的問題了。

我試圖舉例來說明,卻發現很難找到現成的例子。但是就實踐中的經驗,通過上述方法,的確能解決很多的相容性問題或者其它bug,希望有一點協助。

相關文章

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.