浏览器兼容性
瀏覽器兼容的重要性 编辑
- 網站做好了瀏覽器兼容，能夠讓網站在不同的瀏覽器下都正常顯示
- 瀏覽器兼容能夠抓住更多的網站訪客
- 瀏覽器兼容能夠給客戶更好的體驗
瀏覽器大戰 编辑
在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正常被瀏覽。
- 瀏覽器的兼容能力日益受到需要；瀏覽器亦因應趨勢，使自己的瀏覽器提供更多兼容功能。
指標 编辑
網頁的瀏覽器兼容的總體目標是在各瀏覽器中顯示正常，實現跨浏览器的，符合用户体验的高质量的网站。
一般從以下幾個方面考慮網頁的瀏覽器兼容性：
解決方法 编辑
- 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的官方跨瀏覽器指引