瀏覽器兼容性

瀏覽器兼容性

瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和製作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。

基本介紹

  • 中文名：瀏覽器兼容性
  • 外文名：Browser compatibility
  • 又稱：網頁兼容性或網站兼容性問題
  • CSS技巧：vertical-align:middle等
  • 產生原因：網頁元素位置混亂，錯位
簡介,瀏覽器大戰,產生原因及解決方案,具瀏覽器兼容性的網頁編碼方式,兼容趨勢,

簡介

網頁的瀏覽器兼容性指網頁在各種瀏覽器上的顯示效果儘量保持一致的狀態，90年代末的瀏覽器大戰開始時被廣泛使用。
瀏覽器兼容的重要性：
  • 網站做好了瀏覽器兼容，能夠讓網站在不同的瀏覽器下都正常顯示
  • 瀏覽器兼容能夠抓住更多的網站訪客
  • 瀏覽器兼容能夠給客戶更好的體驗

瀏覽器大戰

在Internet Explorer和Netscape Navigator的爭戰中，兩個瀏覽器各自推出非標準的HTML語句(如Navigator的BLINK標籤——閃爍效果，Internet Explorer的MARQUEE標籤——跑馬燈效果)，以專有的特色功能分割市場。微軟以此產品差異化策略（英語：Product Differentation）成功開發了一群忠實客戶和數量上有一定影響的IE Only網站。
同時，網頁瀏覽標準只規定了接口，並沒有接口實現的詳細規範，使得各瀏覽器對相同的功能使用了不同的實現方法，並導致了功能實現的差異。這些差異按程度由顯示方面到核心概念的都存在。瀏覽器兼容性就是指標準功能在各瀏覽器的差異程度，差異的解決方法是為瀏覽器兼容。

產生原因及解決方案

因為不同瀏覽器使用核心及所支持的HTML（標準通用標記語言下的一個套用）等網頁語言標準不同；以及用戶客戶端的環境不同（如解析度不同）造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂，錯位。
解決方案：
對於一般用戶來說
應該用ie8兼容模式瀏覽網頁, 而不應該用ie9或ie10渲染模式. 很多用戶安裝ie10後發生很多網頁顯示錯亂, 就是兼容性的原因, 因為ie10默認的渲染模式是ie10. 此時應該將其改為ie7渲染模式。
為什麼用ie6/7渲染模式的原因如下:
中國所有網頁肯定都支持ie, 支持ie就是支持ie核心的所有瀏覽器. 但並不一定支持chrome, firefox, 雙核瀏覽器的高速模式, 原因很簡單, 網頁開發人員沒有那么多時間和精力去兼容及測試那么多瀏覽器, 開發人員能讓網頁在ie下正常工作已經不錯了, 就這還老得加班呢, 還有很多新需求和bug，測試人員還要去改
渲染模式和網頁打開速度幾乎沒有關係, 用戶感覺不到.
對於網站開發者來說，當前暫沒有統一的能解決這樣的工具，最普遍的解決辦法就是不斷的在各瀏覽器間調試網頁顯示效果，通過對css樣式控制以及通過腳本判斷並賦予不同瀏覽器的解析標準。
如果所要實現的效果可以使用框架，那么還有另一個解決辦法是在開發過程中使用當前比較流行的JS，CSS框架，如jQuery，YUI等等，因為這些框架無論是底層的還是套用層的一般都已經做好了瀏覽器兼容，所以可以放心使用。除此之外，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';

兼容趨勢

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

相關詞條

熱門詞條

聯絡我們