詳解CSS3瀏覽器兼容
我要評(píng)論本篇介紹了CSS3與頁(yè)面布局學(xué)習(xí)和總結(jié)——瀏覽器兼容與前端性能優(yōu)化，具體如下：
一、瀏覽器兼容
1.1、概要
世界上沒(méi)有任何一個(gè)瀏覽器是一樣的，同樣的代碼在不一樣的瀏覽器上運(yùn)行就存在兼容性問(wèn)題。不同瀏覽器其內(nèi)核亦不盡相同，相同內(nèi)核的版本不同，相同版本的內(nèi)核瀏覽器品牌不一樣，各種運(yùn)行平臺(tái)還存在差異、屏幕分辨率不一樣，大小不一樣，比例不一樣。兼容性主要考慮三方面：
1)、CSS兼容
2)、JavaScript兼容
3)、HTML兼容
這三類也是前端的主要組成部分，都存在一定的兼容性問(wèn)題，知己知彼，百戰(zhàn)百勝，我們先了解瀏覽器的發(fā)動(dòng)機(jī)—內(nèi)核。
多年前我們一直為IE6兼容煩惱，為它沒(méi)少加班；盼走了IE6現(xiàn)在又出現(xiàn)了IE8，看來(lái)兼容沒(méi)有盡頭...
1.2、瀏覽器內(nèi)核
Trident
Microsoft公司瀏覽器內(nèi)核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及許多品牌瀏覽器的內(nèi)核。其中部分瀏覽器的新版本是“雙核”甚至是“多核”，其中一個(gè)內(nèi)核是Trident，然后再增加一個(gè)其他內(nèi)核。
Gecko
Firefox內(nèi)核，Netscape6開(kāi)始采用的內(nèi)核，后來(lái)的Mozilla FireFox(火狐瀏覽器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開(kāi)源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的內(nèi)核。
Presto
Opera前內(nèi)核，已廢棄，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核。
Webkit
Safari內(nèi)核,Chrome內(nèi)核原型,開(kāi)源，它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。 傲游瀏覽器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器
Blink
Blink是一個(gè)由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎，Google計(jì)劃將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，這一渲染引擎是開(kāi)源引擎WebKit中WebCore組件的一個(gè)分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。
edge
微軟專門為新IE打造的引擎，速度快，目前已經(jīng)基于此引擎開(kāi)發(fā)了瀏覽器，目前IE11使用該內(nèi)核，估計(jì)以后微軟的新瀏覽器會(huì)繼續(xù)采用該內(nèi)核。
1.3、瀏覽器市場(chǎng)份額（Browser Market Share）
能過(guò)瀏覽器的市份額我們可以在處理瀏覽器兼容性時(shí)會(huì)更加關(guān)注市場(chǎng)份額高的瀏覽器，適當(dāng)?shù)臅r(shí)候可以放棄市場(chǎng)份額占有量小的瀏覽器。
國(guó)際：
查詢地址：https://www.netmarketshare.com
2016年12月PC瀏覽器數(shù)據(jù)
2016年12月平板+移動(dòng)數(shù)據(jù)
2016年瀏覽器份額變化
國(guó)內(nèi)：
查詢地址：http://#baidu.com/data/browser
從上圖可以看出，我們?cè)卺槍?duì)PC Web開(kāi)發(fā)時(shí)需要重點(diǎn)關(guān)注Chrome、IE瀏覽器，開(kāi)發(fā)Mobile項(xiàng)目時(shí)要重點(diǎn)關(guān)注Chrome瀏覽器與Safari。
1.4、兼容的一般標(biāo)準(zhǔn)
1)、在不同的主流的瀏覽器上表現(xiàn)效果一致
2)、能適應(yīng)不同的屏幕大小
3)、能適應(yīng)不同的分辨率與色彩深度
瀏覽器兼容在線測(cè)試：
IE測(cè)試可以安裝：IETester在本地測(cè)試。
1.5、CSS Reset
每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet，網(wǎng)頁(yè)在沒(méi)有指定的樣式時(shí)，按瀏覽器內(nèi)置的樣式表來(lái)渲染。這是合理的，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會(huì)有很多兼容問(wèn)題，CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。
如全局重置*{ padding: 0; margin: 0; border:}雖然能全部重置，但由于性能較低，不推薦使用。因?yàn)?需要遍歷整個(gè)DOM樹(shù)，當(dāng)頁(yè)面節(jié)點(diǎn)較多時(shí)，會(huì)影響頁(yè)面的渲染性能。這個(gè)網(wǎng)站http://cssreset.com/有最新的CSSReset提供給大家參考。
Normalize (號(hào)稱是CSS reset的替代方案，保留了一些內(nèi)置的樣式，并不是清除所有)
http://nicolasgallagher.com/about-normalize-css/
https://github.com/necolas/normalize.css
示例：請(qǐng)看第2章的內(nèi)容
1.6、CSS Hack
CSS Hack就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫特定的CSS樣式達(dá)到讓瀏覽器兼容的過(guò)程。
1.6.1、條件注釋法
IE條件注釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視為注釋。
gt : greater than，選擇條件版本以上版本，不包含條件版本 >
lt : less than，選擇條件版本以下版本，不包含條件版本 <
gte : greater than or equal，選擇條件版本以上版本，包含條件版本>=
lte : less than or equal，選擇條件版本以下版本，包含條件版本 <=
! : 選擇條件版本以外所有版本，無(wú)論高低
*只有IE瀏覽器認(rèn)識(shí)條件注釋、其它瀏覽器會(huì)跳過(guò)
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的瀏覽器Out了，請(qǐng)下載更新。");
</script>
<![endif]-->
</head>
<body>
<!--[if gt IE 6]>
<h2>大于IE6版本的瀏覽器</h2>
<![endif]-->
</body>
</html>
效果：
IE8
chrome
ie6
1.6.2、樣式內(nèi)屬性標(biāo)記法
在CSS樣式的屬性名前或值后面添加特殊的字符讓不同的瀏覽器解析。
http://browserhacks.com/在線查詢， 這一個(gè)功能強(qiáng)大的提供各種針對(duì)性兼容辦法的網(wǎng)站，非常實(shí)用。
“-″下劃線是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack
這里以IE6雙邊距問(wèn)題為例。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果：
1.6.3、選擇器前綴法
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
《hack速查表》：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hack速查表</title>
<style type="text/css">
/*reset*/
* {
margin: 0;
padding: 0;
}
body {
font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
height: 100%;
text-align: center;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: collapse;
border-spacing: 0;
}
ul,
ol {
list-style: none;
}
em {
font-style: normal;
color: #f00;
}
h1 {
font-size: 2em;
font-weight: 700;
}
.hack {
width: 1000px;
margin: 0 auto;
text-align: left;
}
.hack table {
width: 100%;
margin: 10px 0;
}
.hack td,
.hack th {
height: 30px;
padding: 0 5px;
border: 1px solid #ccc;
}
.hack th {
color: #cc0bf6;
}
.hack th.eq,
.hack td.eq {
width: 350px;
color: #333;
}
.hack th.identifier,
.hack td.hack-data {
width: 350px;
color: #61602f;
}
.hack td.no {
color: #fff;
text-align: center;
background-color: red;
}
.hack td.yes {
color: #fff;
text-align: center;
background-color: green;
}
.hack p b {
color: green;
}
.hack p b.red {
color: red;
}
.hack h2 {
margin: 10px 0 0 0;
font-size: 1.5em;
font-weight: 700;
}
.hack-list {
margin: 10px 0;
}
.hack-list li {
margin-bottom: 5px;
zoom: 1;
}
.hack-list span {
float: left;
width: 15px;
font-family: "\5b8b\4f53";
}
.hack-list-inf {
padding: 0 0 0 15px;
}
.hack-list em {
display: inline-block;
margin: 0 5px;
}
</style>
</head>
<body>
<h1>hack速查表</h1>
<div class="hack">
<p>建議：以標(biāo)準(zhǔn)瀏覽器為準(zhǔn)書寫代碼，如遇到兼容問(wèn)題，嘗試其他方法解決問(wèn)題，在萬(wàn)不得已怕情況下，采用HACK解決。</p>
<p>以下是我總結(jié)的HACK書寫方法:</p>
<p>瀏覽器：僅限IE6+，F(xiàn)F，safari,chrome,opera;(截止到2011.10.12非IE均為最新版本)。</p>
<p>測(cè)試環(huán)境：windows系統(tǒng);</p>
<p>DOCTYPE:
<!doctype html>.</p>
<table cellpadding="0">
<thead>
<tr>
<th class="identifier">標(biāo)志符</th>
<th class="eq">示例</th>
<th>IE6</th>
<th>IE7</th>
<th>IE8</th>
<th>IE9</th>
<th>FF</th>
<th>OP</th>
<th>SA</th>
<th>CH</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hack-data">*</td>
<td>.eq {*color:#000;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">_</td>
<td>.eq {_color:#000;}</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">+</td>
<td>.eq {+color:#000;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">-</td>
<td>.eq {-color:#000;}</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">></td>
<td>.eq {>color:#000;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">\0</td>
<td>.eq {color:#000\0;}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">\9</td>
<td>.eq {color:#000\9;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">\9\0</td>
<td>.eq {color:#000\0;}</td>
<td class="no">N</td>
<td class="no">N</td>
<td>N\Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">:root .xx{xxx:xxx\9;}</td>
<td>:root .eq {color:#a00\9;}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">*+</td>
<td>.eq {*+color:#000;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">*-</td>
<td>.eq {*-color:#000;}</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">*html</td>
<td><span class="hack-data">*html</span> .eq {color:#000;}</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">*+html</td>
<td><span class="hack-data">*+html</span> .eq {color:#000;}</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">html*</td>
<td>html* .eq {color:#000;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">[;</td>
<td>.eq {color:red;[;color:blue;}</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">html>body</td>
<td>html>body .eq {color:blue;}</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">html>/**/body</td>
<td>html>/**/body .eq {color:blue;}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">html/**/>body</td>
<td>html/**/>body .eq {color:blue;}</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">@media all and (min-width:0px){}</td>
<td><span class="hack-data">@media all and (min-width:0px){.eq {color:#000;}}</span></td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">*:first-child+html</td>
<td>*:first-child+html .eq {color:blue;}</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">*:first-child+html{} *html</td>
<td>*:first-child+html{} *html .eq {color:blue;}</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">@-moz-document url-prefix(){}</td>
<td>@-moz-document url-prefix(){ .eq {color:blue;}}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">@media screen and (-webkit-min-device-pixel-ratio:0){}</td>
<td>@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
<tr>
<td class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}</td>
<td><span class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</span></td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="no">N</td>
<td class="no">N</td>
</tr>
<tr>
<td class="hack-data">body:nth-of-type(1)</td>
<td>body:nth-of-type(1) .eq {color:blue;}</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="no">N</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
<td class="yes">Y</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="identifier">標(biāo)志符</th>
<th class="eq">示例</th>
<th>IE6</th>
<th>IE7</th>
<th>IE8</th>
<th>IE9</th>
<th>FF</th>
<th>OP</th>
<th>SA</th>
<th>CH</th>
</tr>
</tfoot>
</table>
<p>FF:firefox; OP:opera; SA:safari; CH:chrome; <b>Y</b>代表支持，<b class="red">N</b>代表不支持。</p>
<h2>注意事項(xiàng)：</h2>
<ul class="hack-list">
<li><span>·</span>
<div class="hack-list-inf">由于各瀏覽器更新神速，所以有些HACK可能會(huì)有變化，所以請(qǐng)大家注意。</div>
</li>
<li><span>·</span>
<div class="hack-list-inf"><em>[;</em>此種方式會(huì)影響后續(xù)樣式，不可取。</div>
</li>
<li><span>·</span>
<div class="hack-list-inf"><em>\9\0</em>并非對(duì)所有屬性都能區(qū)分IE8和IE9.比如：background-color可以，但background不可以，還有border也不可以。所以在實(shí)際用時(shí)要測(cè)試下。</div>
</li>
<li><span>·</span>
<div class="hack-list-inf">當(dāng)同時(shí)出現(xiàn)<em>\0</em>;<em>*</em>;<em>_</em>;時(shí)，推薦將\0寫在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否則IE7和IE6里的效果會(huì)失效。但border例外，放在前后都可以。保險(xiǎn)起見(jiàn)，還是放在前面。 </div>
</li>
</ul>
<h2>推薦寫法：</h2>
<h3>demo:</h3>
<pre>
.eq {
color:#f00;/*標(biāo)準(zhǔn)瀏覽器*/
color:#f30\0;/*IE8,IE9,opera*/
*color:#c00;/*IE7及IE6*/
_color:#600;/*IE6專屬*/
}
:root .eq {color:#a00\9;}/*IE9專屬*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera專屬*/
@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit專屬*/
@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox專屬*/
</pre>
</div>
</body>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@media screen\0 {
body {
background: lightblue;
}
}
</style>
</head>
<body>
</body>
</html>
運(yùn)行結(jié)果：
1.7、文檔模式 （X-UA-Compatible）
文檔模式是IE8瀏覽器以后的一種獨(dú)有技術(shù)，他可以通過(guò)meta指定當(dāng)前文檔的渲染模式，如可以把IE8降級(jí)成IE6、IE7使用。文檔模式的主要作用是影響瀏覽器顯示網(wǎng)頁(yè)HTML的方式，用于指定IE的頁(yè)面排版引擎（Trident）以哪個(gè)版本的方式來(lái)解析并渲染網(wǎng)頁(yè)代碼。
<meta http-equiv="X-UA-Compatible" content="IE=6" > <meta http-equiv="X-UA-Compatible" content="IE=7" > <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > <meta http-equiv="X-UA-Compatible" content="IE=edge" >//最新IE
“X-UA-Compatible”的值有兩種方式：Emulate+IE版本號(hào)，單純版本號(hào)
EmulateIE8：如果聲明了文檔類型，則以IE8標(biāo)準(zhǔn)模式渲染頁(yè)面，否則將文檔模式設(shè)置為IE5
9：強(qiáng)制以IE9標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類型聲明
x-ua-compatible 頭標(biāo)簽大小寫不敏感，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" > <meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)
插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁(yè)時(shí)，實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核
未指定文檔模式時(shí)使用默認(rèn)的文檔模式示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>X-UA-Compatible</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
運(yùn)行結(jié)果：
強(qiáng)制指定文檔模式為IE6，在IE8下會(huì)自動(dòng)變成怪異模式，簡(jiǎn)單說(shuō)IE8被當(dāng)作IE6在用。
多數(shù)情況下我們不會(huì)這樣降級(jí)使用，一般會(huì)將IE選擇為最新版本的文檔模式（注意不是文檔類型），如果IE瀏覽器使用了GCF技術(shù)我們應(yīng)該強(qiáng)制使用最新版內(nèi)核，寫入如下：
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />
現(xiàn)在多數(shù)網(wǎng)站這是這種寫法如baidu。
1.8、javascript兼容
這里有兩層意思，第一可以使用javascript操作樣式與標(biāo)簽，強(qiáng)制瀏覽器兼容，比如先使用javascript判斷瀏覽器類型，再操作樣式與標(biāo)簽。
第二指javascript存在兼容問(wèn)題，如一個(gè)對(duì)象在某些瀏覽器下沒(méi)有辦法使用，要讓javascript更加兼容，可以采取如下辦法：
1、使用第三方提代的javascript庫(kù)，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery這種成熟的javascript庫(kù)經(jīng)過(guò)多次的版本迭代，已經(jīng)變得非常成熟，世界上的網(wǎng)站到現(xiàn)在近60%都使用到了jQuery，他的兼容性不錯(cuò)。
2、瀏覽器檢測(cè)、重新封裝
使用javascript判斷瀏覽器類型，對(duì)一些特點(diǎn)的方法或?qū)ο笾匦路庋b后使用屏蔽瀏覽的不兼容性。可以使用User-Agent、或特定對(duì)象。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2 id="msg"></h2>
<script type="text/javascript">
//用于檢測(cè)瀏覽器是否為IE
var isIE=function(){
return !!window.ActiveXObject;
}
function show(info){
document.getElementById("msg").innerHTML+=info+"<br/>"
}
//獲得用戶代理對(duì)象，瀏覽器與操作系統(tǒng)信息
show(navigator.userAgent);
show(isIE()?"是IE瀏覽器":"不是IE瀏覽器");
</script>
</body>
</html>
效果：
在user-agent中包含有不少的客戶端信息，可以解析出判斷瀏覽器部分的內(nèi)容。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于老式瀏覽器兼容HTML5和CSS3的問(wèn)題
下面小編就為大家?guī)?lái)一篇關(guān)于老式瀏覽器兼容HTML5和CSS3的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-01css3強(qiáng)大的動(dòng)畫效果animate使用說(shuō)明及瀏覽器兼容介紹
昨天突然看到j(luò)ing.fm（這個(gè)音樂(lè)網(wǎng)站非常不錯(cuò)，很多效果我都很喜歡，如果你有興趣，可以去圍觀下）上音樂(lè)播放時(shí)，專輯的轉(zhuǎn)動(dòng)效果很不錯(cuò)，所以準(zhǔn)備自己動(dòng)手寫下，以備后用。2013-01-09