首先要做的是挑選乙個好的瀏覽器。我的選擇是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方法就像在乙個返回錯誤值的函式中加入修正量（如下），而不是找出其中的演算法性錯誤。
複製**
**如下:
return result + 4;
當然，有時候在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. 依賴樣式級聯
首先，在任何可能的情況下都盡量依靠樣式級聯。瀏覽器總是採取他們能夠讀懂的最後宣告的樣式。所以，你應該從針對老版本瀏覽器的樣式開始書寫，這樣個瀏覽器就能讀懂和使用它能讀懂的最後的樣式。例如：
複製**
**如下:
.foo
2. 使用針對特定瀏覽器的字首
使用針對特定瀏覽器的字首，尤其對於還未被廣泛採用的屬性適用。例如：
複製**
**如下:
.foo
注意，這套**裡有兩個針對不同版本webkit的語法。字首**的順序同樣應該從針對老版本瀏覽器開始書寫（參照第一條）。
如果有乙個w3c標準定義的語法，你應該把它放在最後（例如上述**最後一行）。這樣隨著瀏覽器開始支援這些新特性的標準語法，你的**也能夠穩健表現。
3. 使用針對ie6/7的*和_
對於舊版本ie特有的bug，使用*和_來彌補。比如：
複製**
**如下:
.clearfix
所有的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：
複製**
**如下:
.foo
6. 不要對最新版本的firefox，chrome，safari使用任何hack
對於firefox，chrome，safari上的樣式bug，最好的辦法是仔細檢查，很有可能這是因為你的**違背了css的規則。
本文標題: 關於除錯css跨瀏覽器樣式bug的問題
本文位址: /web/xindejiqiao/87960.html
如何除錯CSS的跨瀏覽器樣式bug
首先要做的是挑選乙個好的瀏覽器。我的選擇是chrome，因為它擁有強大的除錯工具。當我在chrome上完成除錯後，我會接著在safari或者firefox上除錯。如果在這些 好的 瀏覽器上沒有達到期望的效果，很有可能是 本身違背了css規則。不要試圖使用hack方法來解決在這些 好的 瀏覽器上出現的...
css樣式判斷瀏覽器
b 區別ie6 ie7 ie8 firefox b tip 為ie系列瀏覽器可讀 9 而ie6和ie7可讀 公尺字型大小 另外ie6可辨識 底線 因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得css語法，所以就可以有效區分ie各版本和非ie瀏覽器 像是firefox opera goo...
谷歌瀏覽器49關於css樣式雜談
谷歌瀏覽器49.0.2623.112 xp系統下的最後乙個版本 代號就為google49吧，與谷歌瀏覽器91.0.4472.114，代號就為google91吧。主要就是專案上用到了flex布局，然後高度100 設定發現有不一樣的體現。先貼上一段 圖1 圖2 3.當把.box test1的定位設定為p...