浏览器兼容性

網頁的瀏覽器兼容性指網頁在各種瀏覽器上的顯示效果盡量保持一致的狀態，90年代末的瀏覽器大戰開始時被廣泛使用。

瀏覽器兼容的重要性

• 網站做好了瀏覽器兼容，能夠讓網站在不同的瀏覽器下都正常顯示
• 瀏覽器兼容能夠抓住更多的網站訪客
• 瀏覽器兼容能夠給客戶更好的體驗

瀏覽器大戰

主条目：瀏覽器大戰

在Internet Explorer和Netscape Navigator的爭戰中，兩個瀏覽器各自推出非標準的HTML語句(如Navigator的BLINK標籤——閃爍效果，Internet Explorer的MARQUEE標籤——跑馬燈效果)，以專有的特色功能分割市場。微軟以此產品差異化策略（Product Differentation）成功開發了一群忠實客戶和數量上有一定影響的IE Only網站。

同時，網頁瀏覽標準只規定了接口，並沒有接口實現的詳細規範，使得各瀏覽器對相同的功能使用了不同的實現方法，並導致了功能實現的差異。這些差異按程度由顯示方面到核心概念的都存在。瀏覽器兼容性就是指標準功能在各瀏覽器的差異程度，差異的解決方法是為瀏覽器兼容。

兼容趨勢

• 瀏覽器大戰後期的Internet Explorer和Netscape Navigator兩大瀏覽器都支持HTML 4.0和CSS 1，使得許多專用語法失去意義而被廢止。
• 客戶端腳本方面，瀏覽器大戰的產物DOM變成了瀏覽器間操控技術的共同界面；對專有方法已有涵蓋。
• 瀏覽器市場擴大，網站為了宣稱自己的兼容能力，一般都能在Mozilla Firefox、Opera、Safari和傳統陣營的Internet Explorer、Netscape Navigator正常被瀏覽。
• 瀏覽器的兼容能力日益受到需要；瀏覽器亦因應趨勢，使自己的瀏覽器提供更多兼容功能。

指標

網頁的瀏覽器兼容的總體目標是在各瀏覽器中顯示正常，實現跨浏览器的，符合用户体验的高质量的网站。

一般從以下幾個方面考慮網頁的瀏覽器兼容性：

• JavaScript
• CSS
• HTML
• DOM

解決方法

• Hack
  • css属性Hack
  • 选择器Hack
• 条件注释

具瀏覽器兼容性的網頁編碼方式

下面是HTML和JavaScript的例子：

<div id="sample" style="position: absolute; top: 100px; left: 100px;">測試文字</div>

以上代碼表示一個文字方塊，距離頁面左邊界100px和頁面上邊界100px。 在Netscape Navigator 4系列中, 使用以下JavaScript移動上面的文字方塊。

document.layers['sample'].left = 200;

但是，在Internet Explorer 4中，則要使用不同的代碼。

document.all['sample'].style.left = 200;

為了移動文字方塊的功能可以在兩個瀏覽器中運行(即瀏覽器兼容性)，須使用以下代碼(在沒有跨瀏覽器的標準操作方法時的做法)

if (document.all)
  document.all['sample'].style.left = 200;
else if (document.layers)
  document.layers['sample'].left = 200;

更標準的語句(推薦使用)： 以下代碼基於W3C標準DOM，能在Mozilla系列瀏覽器、Internet Explorer的新近版本和各種遵守標準標準的瀏覽器中。

document.getElementById('sample').style.left = '200px';

外部連結

• QuirksMode （页面存档备份，存于互联网档案馆） — 市場上瀏覽器的差異及解決方法
• X （页面存档备份，存于互联网档案馆） — 跨瀏覽器的JavaScript庫及應用實例
• Crosscheck — JavaScript單元測試框架，可以模擬各種瀏覽器和平台環境。
• browsershots.org （页面存档备份，存于互联网档案馆） — 免費開源資源，可以讓網站在一同瀏覽器中顯示。
• Cross-Browser — 提供網站跨瀏覽器輸出的截圖功能。
• Multi-Browser Viewer （页面存档备份，存于互联网档案馆） — 跨瀏覽器測試軟件，可以讓不同瀏覽器在同一電腦上執行。
• BrowserSeal （页面存档备份，存于互联网档案馆） — 網站跨瀏覽器輸出的截圖軟入
• Google Cross Browser FAQ's （页面存档备份，存于互联网档案馆） — Google Chrome的官方跨瀏覽器指引