首先要做的是挑選一個好的浏覽器。我的選擇是Chrome,因為它擁有強大的調試工具。當我在Chrome上完成調試後,我會接著在Safari或者Firefox上調試。
如果在這些“好的”浏覽器上沒有達到期望的效果,很有可能是代碼本身違背了CSS規則。不要試圖使用hack方法來解決在這些“好的”浏覽器上出現的問題,而是應該找出問題的原因。通常我會檢查以下可能的BUG出處:
接下來正文來了
最重要的需要記住的就是,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方式:
在這裡我就不列舉所有的display和position組合了。總之,有兩件事情需要注意:
比如,float,table-cell和行內元素組合在一起是否合適?浏覽器將如何解釋渲染?在W3C標准裡有沒有定義?如果沒有,那麼可能就有出現跨浏覽器bug的風險。當然,這樣的組合並不是不可以,但你要想清楚為什麼要這樣做,以及做好足夠的跨浏覽器測試。
Internet Explorer
當你解決了在“好的”浏覽器上出現的問題後,現在應開始著手IE平台。我的建議是從你希望支持的最老版本的IE開始,因為很多老版本IE上的問題在新版本中延續出現。
就算對於IE,你也應該嘗試找出問題而不是依賴於使用hack方法。盲目使用*和_的hack方法就像在一個返回錯誤值的函數中加入修正量(如下),而不是找出其中的算法性錯誤。
當然,有時候在IE6和IE7裡面使用hack是必要的。對於IE8,通常只在需要兼容CSS3的地方使用hack。通常情況下,在IE6/7裡需要使用hack的地方有:
還有一些不太常見的需要使用hack的情況,比如當兩個浮動元素中間有comment代碼時將會觸發重復內容bug。對於只在IE中出現的css問 題,我的建議是仔細描述你所看見的,並在google中搜索相應的解決方法。在你找到bug原因前,不要盲目使用hack掩飾它。IE自帶的調試工具很糟 糕,所以可能你需要給元素增加背景色來方便你查看頁面上真實的排版。
實現解決方案
當你找到bug的原因並且知道解決方法後,你同時也應該知道如何在修改代碼時不破壞已有的正常效果的代碼。下面是我的建議:
1. 依賴樣式級聯
2. 使用針對特定浏覽器的前綴
3. 使用針對IE6/7的*和_
4. 不要使用針對IE8的\9
5. 知道什麼時候該放棄針對IE的hack
6. 不要對最新版本的Firefox,Chrome,Safari使用任何hack
1. 依賴樣式級聯
首先,在任何可能的情況下都盡量依靠樣式級聯。浏覽器總是采取他們能夠讀懂的最後聲明的樣式。所以,你應該從針對老版本浏覽器的樣式開始書寫,這樣個浏覽器就能讀懂和使用它能讀懂的最後的樣式。例如:
2. 使用針對特定浏覽器的前綴
使用針對特定浏覽器的前綴,尤其對於還未被廣泛采用的屬性適用。例如:
注意,這套代碼裡有兩個針對不同版本webkit的語法。前綴代碼的順序同樣應該從針對老版本浏覽器開始書寫(參照第一條)。
如果有一個W3C標准定義的語法,你應該把它放在最後(例如上述代碼最後一行)。這樣隨著浏覽器開始支持這些新特性的標准語法,你的代碼也能夠穩健表現。
3. 使用針對IE6/7的*和_
對於舊版本IE特有的bug,使用*和_來彌補。比如:
所有的IE hack都針對於某版本和其之前的所有浏覽器,比如:
_ 針對IE6和更早版本
* 針對IE7和更早版本
\9 針對IE8和更早版本 (注意,IE9在某些CSS屬性上同樣對於這個hack敏感)
所以,hack代碼的順序同樣也應該從針對老版本浏覽器開始書寫(參照第一條)。
4. 不要使用針對IE8的\9
我從來不會使用\9來解決IE8裡面出現的樣式bug。我只會在彌補浏覽器支持性上使用\9來做“降級”處理。比如我使用了box- shadow(在更先進的浏覽器上正常),可是在IE8下很難看,因此我使用了\9來增加了一個新border。這種情況不能依靠樣式級聯(參照第一條) 來處理,因為這是增加一個新樣式,而不是修改一個已有的樣式。
5. 知道什麼時候該放棄針對IE的hack
不要試追求在IE中得到一模一樣的效果。你是否願意浪費額外的HTTP請求,繁雜的HTML/JS/CSS代碼段為了實現在IE6-8中同樣看到圓角框效果?對於我個人來說,我的答案是“不會”。
你應該知道什麼時候放棄針對某功能的hack。例如,不要使用filter去模擬CSS3裡的漸變效果,那樣會導致性能問題和排版bug。最簡單的 辦法是,壓根不要寄希望你的網頁在所有浏覽器中都表現得一模一樣。對於IE 6-8的用戶,最好的辦法就是給他們一個簡單化的用戶體驗(注意,是簡單化而不是殘缺)。
下述糟糕的代碼就是使用filter去模擬CSS3裡的gradient:
6. 不要對最新版本的Firefox,Chrome,Safari使用任何hack
對於Firefox,Chrome,Safari上的樣式bug,最好的辦法是仔細檢查,很有可能這是因為你的代碼違背了CSS的規則。