首先要做的是挑選乙個好的瀏覽器。我的選擇是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組合了。總之，有兩件事情需要注意：
對於我選擇的display和position方式，其他的屬性（比如margin，line-height）是不是適合？
兄弟節點的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的地方有：
haslayout問題，使用zoom:1
相對定位導致元素消失
3px浮動bug
被撐大的容器的浮動錯誤，可是經常被overflow:hidden碰巧的掩飾了。
還有一些不太常見的需要使用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的問題
首先要做的是挑選乙個好的瀏覽器。我的選擇是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...
cocos creator 解決瀏覽器除錯跨域問題
尋找出來的解決方案是通過關閉chrome瀏覽器的安全策略 首先需要把chrome瀏覽器全部關掉！新建乙個chrome的快捷方式，在目標行後加入 args disable web security user data dir 請把雙引號內的內容完全複製，包括空格，每個 符號的前面必須留乙個空格。如上述...