跨瀏覽器兼容的重要性技巧
如今每個人都使用不同的瀏覽器。受歡迎的選擇，如Firefox，Safari，Chrome和IE瀏覽器，占近98%的市場份額的互聯(lián)網(wǎng)瀏覽器，以及其他鮮為人知的瀏覽器如Konqueror，有眾多的瀏覽器來查看您的網(wǎng)站。

如何讓您的網(wǎng)站的功能在所有這些選項？重要的是，你的網(wǎng)站可以在所有主要媒體上使用，無論是流行的瀏覽器，移動設備，或任何其他的網(wǎng)頁瀏覽設備。在本文中，我們將介紹一些基本知識，確保您的站點是跨瀏覽器兼容的，包括片段和資源，以幫助您前進。

問題

不是每個人都使用相同的瀏覽器。類似于每個人在不同的操作系統(tǒng)上運行的方式，您不能期望所有人都使用相同的Web瀏覽工具。

那么有什么選擇呢？有關當前瀏覽器份額的數(shù)據(jù)根據(jù)來源和地區(qū)而有所不同，但總的來說，IE瀏覽器、火狐瀏覽器、Chrome瀏覽器、Safari和Opera占據(jù)了大部分市場份額，IE瀏覽器占據(jù)了市場。Internet Explorer 8有超過25%的市場份額，IE瀏覽器6有215，IE瀏覽器7有14%。

當有這么多不同的選擇，每一個運行自己的渲染引擎，你如何確保你的網(wǎng)頁設計或應用程序將在每一個？這就是我們希望涵蓋的內容，并為本文提供解決方案。

你的站點如何運行？

那么，目前的站點在眾多瀏覽器中如何運行呢？為什么不親自檢查一下呢？如果你不想在自己的個人電腦上安裝所有的主要瀏覽器，這里有一些資源可以幫你擺脫困境。

Adobe瀏覽器實驗室

Adobe BrowserLab提供查看您的網(wǎng)站截圖一個很棒的解決方案的需求。這通常是我去在不同的瀏覽器進行測試程序。

Adobe瀏覽器實驗室

Browsershots

在很多不同的瀏覽器使你設計的網(wǎng)站截圖。在你提交你的URL后，它會給你一個URL，在那里你的截圖會被加載。

Browsershots

瀏覽器沙箱

運行一個應用程序來查看您的網(wǎng)站在各種瀏覽器。

瀏覽器沙箱

browsrcamp

允許你測試你的設計與Mac瀏覽器的兼容性。

browsrcamp

IE測試儀

一個免費的瀏覽器允許你檢查你的網(wǎng)站看起來像IE8，IE7 IE 6和IE5.5在Windows 7，Vista和XP。

IE測試儀

瀏覽器校對你的站點

所以結果表明你的網(wǎng)站在所有主要瀏覽器上都沒有達到預期的功能。不必擔心，這種事我們大家都是難免的?，F(xiàn)在是時候去修理它。

驗證

首先，確認你的站點。清除這些XHTML和CSS錯誤通?？梢越鉀Q那些討厭的瀏覽器bug。我建議運行您的網(wǎng)站通過W3的XHTML驗證器和CSS驗證器。

CSS重置

另一個確保站點跨瀏覽器兼容的好方法是在工作一個項目之前總是重置CSS。有許多不同的全球CSS重置，但Eric Meyer的一個和雅虎的一個被認為是最正確的：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;}

包括他們的CSS重置樣式在樣式表的頂部，或有雅虎主機和簡單的鏈接在你的HTML文件，就在你自己的樣式表：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

條件語句

另一種確保站點跨瀏覽器兼容的流行方法是使用條件語句來定位特定的瀏覽器?；旧?，這個想法是檢測用戶的瀏覽器，如果它是指定的瀏覽器之一，它應該執(zhí)行某種動作。

一個條件語句的最常見的用途是包括一個樣式表如果瀏覽器是Internet Explorer。通過這樣做，你可以正確的在你的代碼中存在一些漏洞和超越你當前的樣式表。

使用條件語句，只要包含在你的XHTML頭部聲明，右下方的樣式表包含。