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

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

問題

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

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

當(dāng)有這么多不同的選擇，每一個(gè)運(yùn)行自己的渲染引擎，你如何確保你的網(wǎng)頁(yè)設(shè)計(jì)或應(yīng)用程序?qū)⒃诿恳粋€(gè)？這就是我們希望涵蓋的內(nèi)容，并為本文提供解決方案。

你的站點(diǎn)如何運(yùn)行？

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

Adobe瀏覽器實(shí)驗(yàn)室

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

Adobe瀏覽器實(shí)驗(yàn)室

Browsershots

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

Browsershots

瀏覽器沙箱

運(yùn)行一個(gè)應(yīng)用程序來(lái)查看您的網(wǎng)站在各種瀏覽器。

瀏覽器沙箱

browsrcamp

允許你測(cè)試你的設(shè)計(jì)與Mac瀏覽器的兼容性。

browsrcamp

IE測(cè)試儀

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

IE測(cè)試儀

瀏覽器校對(duì)你的站點(diǎn)

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

驗(yàn)證

首先，確認(rèn)你的站點(diǎn)。清除這些XHTML和CSS錯(cuò)誤通常可以解決那些討厭的瀏覽器bug。我建議運(yùn)行您的網(wǎng)站通過(guò)W3的XHTML驗(yàn)證器和CSS驗(yàn)證器。

CSS重置

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

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重置樣式在樣式表的頂部，或有雅虎主機(jī)和簡(jiǎn)單的鏈接在你的HTML文件，就在你自己的樣式表：

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

條件語(yǔ)句

另一種確保站點(diǎn)跨瀏覽器兼容的流行方法是使用條件語(yǔ)句來(lái)定位特定的瀏覽器。基本上，這個(gè)想法是檢測(cè)用戶的瀏覽器，如果它是指定的瀏覽器之一，它應(yīng)該執(zhí)行某種動(dòng)作。

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

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