W3C對標準的推進，Firefox，Chrome，Safari，Opera的出現，結束了IE雄霸天下的日子。
然而，這對開發者來說，是好事，也是壞事。
說它是好事，是因爲瀏覽器廠商爲了取得更多的市場份額，會促使各瀏覽器更符合W3C標準，而得到更好的兼容性，並且，不同瀏覽器的擴展功能(例如 -moz，-webkit開頭的樣式)，對W3C標準也是個推進；說它是壞事，因爲，多個瀏覽器同時存在，這些瀏覽器在處理一個相同的頁面時，表現有時會有差異。這種差異可能很小，甚至不會被注意到；也可能很大，甚至造成在某個瀏覽器下無法正常瀏覽。我們把引起這些差異的問題統稱爲“瀏覽器兼容性問題”。而正是這些“瀏覽器兼容性問題”，無形中給我們的開發增加了不少難度。
從瀏覽器內核的角度來看，瀏覽器兼容性問題可分爲以下三類：
1. 渲染相關：和樣式相關的問題，即體現在佈局效果上的問題。
2. 腳本相關：和腳本相關的問題，包括JavaScript和DOM、BOM方面的問題。對於某些瀏覽器的功能方面的特性，也屬於這一類。
3. 其他類別：除以上兩類問題外的功能性問題，一般是瀏覽器自身提供的功能，在內核層之上的。例如下面的頁面，是一個渲染相關的問題：
[img=https://lh5.googleusercontent.com/NZcN5O4UKSSaV-zCxqv9AKIiZtoJReE1F6_r60UuKMG1Yd5Labogmbt_93DCh0NRAn7H-A7M6IhTwzgn0uEeuwjAiqunN6pEjevWKXhhs6z3Oryu][/img]在各個瀏覽器中都表現的不同，這就屬於兼容性問題。
造成瀏覽器兼容性問題的根本原因就是瀏覽器各瀏覽器使用了不同的內核，並且它們處理同一件事情的時候思路不同。
現今常見的瀏覽器及其排版引擎（又稱渲染引擎）及腳本引擎，如下：
[img=https://lh3.googleusercontent.com/3c8gVfVOJYaUCyLIXV32bSbMyTLnUWznJSzx6NCsaaDPXFP8XGvFcubkS1xK0NQ9oziSfUIHwbltRzK3F-s0FhANSgcqQIs00mAusat37F59Q-ez][/img]而造成瀏覽器兼容性問題的常見原因則是設計師寫出了不規範的代碼，不規範的代碼會使不兼容現象更加突出。
例如：
不規則的嵌套：
XML/HTML code
<div>
<li>新聞標題一</li>
<li>新聞標題一</li>
<li>新聞標題一</li>
</div>DIV 中直接嵌套 LI 元素是不合標準的，LI 應該處於 UL 內。此類問題常見的還有 P 中嵌套 DIV， TABLE等元素。
不規範的DOM接口和屬性設置：
JavaScript code
document.all.a_name.style.top=35;
上面代碼中top的值，其實應該是一個字符串值，需有單位。例如：35px。總之，人爲的原因也佔很大一部分。而人爲造成兼容性問題的原因，除了粗心之外，大都源於瀏覽器bug的存在，和開發者對標準的不瞭解。
比如，如果要做一個功能，功能是想讓鼠標懸停在 IMG 元素上方時，可以出現提示信息，經常針對 IE 做開發的人，可能會使用 IMG 元素的 “alt” 屬性，但其他瀏覽器中就是不給 ‘alt’ 屬性面子。因爲 W3C 標準中規定要去做這件事的屬性是 ”title“，大多瀏覽器符合標準，IE 不符合，這是 IE 瀏覽器內核的問題；開發者不知道 ”title“ 纔是正解，不遵循標準去寫代碼，是開發者的問題。所以，一個問題分兩半，瀏覽器和開發者都有責任。
既然都有責任，就都有義務去解決兼容性問題。那麼，從瀏覽器的角度來講，它的廠商應該修復瀏覽器的bug和不合標準的地方，當某一天 IE 的 ”alt“ 不能用於提示了，還有人用這個錯誤的屬性去顯示提示麼？ 從開發者角度來講，多瞭解標準，瞭解瀏覽器兼容性問題，就可以在開發的過程中，有效的避開兼容性問題，讓你的頁面在所有瀏覽器中暢通無阻。
廢話少說，下面就講講如何有效的避免一些兼容性問題。
概括來說，避免兼容性問題的有效途徑就是：正確的使用 DTD，書寫符合 W3C 規範的代碼。
那什麼叫做 DTD 呢，DTD是做什麼的和爲什麼要寫DTD呢？DTD 是 Document Type Definition 的縮寫，是文檔類型定義。定義上說“此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範”。
那其中所說的規範又是什麼呢？我們平時所說的規範大部分情況下就指的是 W3C 制定的規範，做WEB前端開發的時候主要接觸其中的HTML、CSS、DOM、XML部分。順便說一下，W3C的網站現在已經提供可校驗HTML和CSS 代碼的工具了，不知道的同學可以看一下：http://validator.w3.org/ 這個是校驗HTML和XHTML的，http://jigsaw.w3.org/css-validator/ 這是校驗CSS樣式表的。
DTD 和 W3C校驗 及 瀏覽器解析 之間有啥關係？簡單地說：W3C校驗將檢查DTD與文檔內容是否匹配；瀏覽器將根據DTD決定啓用何種渲染模式。
後面半句就是說，寫了正確的DTD，瀏覽器就會按照標準方式（Standards mode）渲染和解析你的頁面，那如果不寫或者寫錯呢，那瀏覽器就會使用怪癖模式（Quirks mode）來渲染和解析你的頁面。怪癖模式的產生的主要原因大概是爲了向後兼容，就是爲了使那些很早之前（IE 6之前的時代）的網頁看上去跟原來的樣子差不多。
下面有一個直觀的例子。
其中，牌子是DTD，水果什麼的是文檔真實內容，對號和差是W3C代碼檢測，動植物是瀏覽器模式。
這是我們寫的代碼：
[img=https://lh6.googleusercontent.com/rQJpoZRtB3Gii8vyWafB7IyxiMjpu3xSpaGQutTxe_t49yDhgsfzfU7tuIqw4q4oZNNSinsQIZMt-nTWkuMoHWe19RcX06I_Dtw0xDa6tsd8unom][/img]W3C校驗將檢查DTD與文檔內容是否匹配，發現有的對不上號，會給出提示：
[img=https://lh5.googleusercontent.com/oaClgM9_SZnQfdMAQfDw1OtYsiUsZ1PkF5em9vhGwxlOeuzU0P6n6KKOFZJa-J-hjCbxtXnhGpSZHJNA21SQqgoYUROyz_FhIROjeYm7lYH2XisV][/img]瀏覽器運行的時候，瀏覽器將根據DTD決定啓用何種渲染模式，不會管你寫的正確與否，按照你寫的方式渲染：
[img=https://lh5.googleusercontent.com/j2emEHoC2yhYhcSr42uFGzxWROWT6MSbVTMVcPzRllnNvMRkuVWAnpCeBD8pz-_2vitoUyfDgs_BRgvhTNZHRkLrc4nSSlO-cR4kBXbCeegtebzO][/img]如何判斷一個DTD是寫得對不對？或者想知道現在的DTD在各個瀏覽器下到底會觸發哪種渲染模式？來這裏http://hsivonen.iki.fi/doctype/ 覈對一下就行。網頁的靠下部分有個紅紅綠綠的表，自己對照一下好了。
另外補充兩點個人經驗：
1. 正確的使用DTD，並書寫符合W3C規範的代碼，雖然現在你即使做到這兩點也不能保證所有瀏覽器都會表現一直，但可以最大程度上避免很多兼容性問題。
2. 推薦使用 HTML5 的 DTD，好寫好記：<!DOCTYPE html>，可以觸發各瀏覽器的 Standards Mode。但是，問題又來了，這樣做一定就能解決問題了嗎？ 不一定，但是這樣可以避免很多問題。比如，IE的盒模型bug等，都可以通過此手段避免。另外有一些是瀏覽器的bug，無法解決的。比如，在Firefox中，TABLE 裏的絕對定位元素的定位問題，再比如IE早期版本對 ‘!important’ 的支持缺陷等。
這時候，就要採取一些非凡的手段了。
一種是在JS裏用瀏覽器判斷，針對不同的瀏覽器做不同的處理；另一種，CSS hack。
在使用CSS hack 的時候注意，CSS hack一定要是醜陋的，時刻提醒自己，那是不得已而爲之的解決方式。
總而言之，正確的使用DTD、並書寫符合W3C規範的代碼 + 使用其他手段……，這些都不能完全避免瀏覽器的不兼容問題。
瀏覽器兼容性問題的“解決”需要瀏覽器開發商、W3C、開發者共同的努力才能實現。
而作爲開發者，我們要做的，就是儘量瞭解標準，熟悉各瀏覽器的Bug和特性，靈活設計頁面功能，纔可以避免出現瀏覽器兼容性問題。