我這樣來解決CSS的Bug

做項目多了。慢慢體會到的是：依據合理的語義化，恰當的文檔流，正確的標準化所生產出來的頁面，在各個公司出品的標準渲染的瀏覽器下，一般是不需要有太多的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，希望有一點協助。