首先要做的是挑選一個好的瀏覽器。我的選擇是Chrome，因為它擁有強大的調試工具。當我在Chrome上完成調試后，我會接著在Safari或者Firefox上調試。

如果在這些“好的”瀏覽器上沒有達到期望的效果，很有可能是代碼本身違背了CSS規則。不要試圖使用hack方法來解決在這些“好的”瀏覽器上出現的問題，而是應該找出問題的原因。通常我會檢查以下可能的BUG出處：

• HTML代碼解釋 – 你是否忘記閉合一個標簽？ 你是否用一個inline元素包住一個block元素？ 違背標準的代碼可能在不同的瀏覽器上被解釋呈現成不同的效果。
• 使用CSS lint工具檢查CSS代碼。留意那些檢查出來的Errors。多數情況下，Errors比Warnings更容易引發跨瀏覽器差異。
• 忘記使用reset樣式表，而是依靠于（不同的）瀏覽器默認的CSS樣式。
• 瀏覽器支持性的差異。你是否使用了高級CSS3屬性或者HTML5元素？查看瀏覽器支持性文檔從而確保所有你的受眾的瀏覽器都被涵蓋。你需要設計“功能降級”來支持老式的瀏覽器。比如，把陰影邊框降級成邊框，或者把圓角降級成方塊。
• 在不該有空格的地方加上了空格，margin可能因此呈現得詭異。
• 使用了絕對定位，可是沒有設置垂直和水平偏移。這種情況下，絕對定位的元素將被呈現在跟position:static一樣的位置上。但是，如果 你嘗試更改它的top，right，bottom或者left值，這個元素將馬上“跳”到參照于它最近的相對定位的父元素的位置。
• 按照“不尋常”的方式組合了不同display方式的元素。比如，W3C標準并沒有說當一個table-cell緊鄰一個浮動元素時應該是怎樣的layout。因此，這樣寫的代碼并不是錯誤的，但可能會導致跨瀏覽器呈現不同效果的BUG。
• 空格是否影響了layout。你應該不想讓排版樣式依賴于空格。
• 小數點像素值會導致跨瀏覽器的不同效果。

接下來正文來了

最重要的需要記住的就是，W3C標準并沒有定義錯誤的行為。因此，如果你沒有按照規范寫，那么可能會導致跨瀏覽器不同效果；如果你組合“奇怪的”屬性（例如margin和inline element），那么也可能會導致跨瀏覽器不同效果bug。

Display

我認為書寫CSS就像在選擇一段旅程。你需要作出一些決定.比如你要首先選擇使用不同display方式的元素：block，inline，inline-block和table。當你選擇好以后，你可以使用一些具體的方法來改變其實際的顯示。

塊元素應該使用margin，padding，height和width。然而line-height不適用。

行內元素應該使用line-height，vertical align和空格符。然而margin，padding，height和width不適用。

首先，表格有垂直和水平排列方式。其次，如果你遺漏了表格中的某元素，整個表格可能會有詭異的顯示。最后，margin不適用與表格的行和列，padding不適用與表格和表格的行。

Positioning

如果你選擇使用塊級元素，接下來你需要選擇position方式：

• Float – 如果你使用了float，那么這個元素就變成了塊級元素，而之前作用于該元素的vertical-align和line-height屬性都將失效。
• Absolute – 相對于最近的相對定位的父節點來計算偏移量。當父節點和兄弟節點改變時，絕對定位的元素并不會導致reflow。這個特性有利于制作動畫效果。但是，如果使用了絕對定位和動態更改內容將可能會導致顯示問題，一個典型的例子是絕對定位的圓角框。
• Static – 默認的position方式。
• Fixed – 元素位置相對于瀏覽器窗口。不常使用的方式。
• Relative – 通常對于該元素樣式不影響。只是其下屬的絕對定位的子節點將相對于該節點計算偏移。

在這里我就不列舉所有的display和position組合了。總之，有兩件事情需要注意：

1. 對于我選擇的display和position方式，其他的屬性（比如margin，line-height）是不是適合？
2. 兄弟節點的position方式是不是契合？

比如，float，table-cell和行內元素組合在一起是否合適？瀏覽器將如何解釋渲染？在W3C標準里有沒有定義？如果沒有，那么可能就有出現跨瀏覽器bug的風險。當然，這樣的組合并不是不可以，但你要想清楚為什么要這樣做，以及做好足夠的跨瀏覽器測試。

Internet Explorer

當你解決了在“好的”瀏覽器上出現的問題后，現在應開始著手IE平臺。我的建議是從你希望支持的最老版本的IE開始，因為很多老版本IE上的問題在新版本中延續出現。

就算對于IE，你也應該嘗試找出問題而不是依賴于使用hack方法。盲目使用*和_的hack方法就像在一個返回錯誤值的函數中加入修正量（如下），而不是找出其中的算法性錯誤。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表