摘要：關(guān)于瀏覽器樣式初始化，經(jīng)驗(yàn)不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個(gè)庫(kù)，，數(shù)量接近萬(wàn)，選取展示其中幾個(gè)樣式設(shè)置，如下通過(guò)樣式初始化，相信能解決不少常規(guī)的兼容性問(wèn)題，接下來(lái)再看看瀏覽器的私有屬性。

前端是一個(gè)苦逼的職業(yè)，不僅因?yàn)榧夹g(shù)更新快，而且要會(huì)的東西實(shí)在太多了（如果全寫出來(lái)，那真是一籮筐），更讓人頭疼的是，還要面臨各種適配、兼容性問(wèn)題。

一直以來(lái)都是頭痛醫(yī)頭腳痛醫(yī)腳，沒(méi)有進(jìn)行系統(tǒng)的梳理，整個(gè)思路和方向全是混亂的，所以非常想把最近整理的，CSS瀏覽器兼容性的常見(jiàn)解決思路和方案，分享給大家，一起進(jìn)步。

為什么會(huì)有瀏覽器兼容性問(wèn)題

還不是因?yàn)闉g覽器廠商太多了！

Chrome，F(xiàn)rirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全瀏覽器，qq瀏覽器，世界之窗，TT，搜狗，opera，maxthon（傲游）……

關(guān)鍵是不同廠商，甚至同一廠商不同版本，對(duì)同一段CSS的解析效果也不一致，這就導(dǎo)致了頁(yè)面顯示效果不統(tǒng)一，也就帶來(lái)了兼容性問(wèn)題。

多么希望Chrome能夠一統(tǒng)江湖啊~~

目前各瀏覽器市場(chǎng)份額

瀏覽器這么多，我們也不可能每一個(gè)都要去兼容，對(duì)于用戶量一般的產(chǎn)品，把主流瀏覽器的適配做好，就已經(jīng)很不錯(cuò)啦。

根據(jù)世界市場(chǎng)權(quán)威調(diào)查機(jī)構(gòu)NetMarketShare公布的2018年10月各瀏覽器市場(chǎng)占有率，可以看出Chrome的占有率達(dá)到了66.43%，這絕對(duì)是一個(gè)振奮人心的好消息。

而根據(jù)百度流量研究院提供的2018年11月至2019年1月的數(shù)據(jù)可以看出，IE系仍然占有很大比重，任重而道遠(yuǎn)啊~

CSS瀏覽器兼容性問(wèn)題的解決思路和方案

今天，不想去關(guān)注太多細(xì)節(jié)問(wèn)題， 比如那個(gè)css樣式需要我們?nèi)ゼ嫒?，而是想討論一下大的解決思路，主要包括4個(gè)方面，瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSS hack語(yǔ)法和自動(dòng)化插件。

1. 瀏覽器CSS樣式初始化

由于每個(gè)瀏覽器的css默認(rèn)樣式不盡相同，所以最簡(jiǎn)單有效的方式就是對(duì)其進(jìn)行初始化，相信很多朋友都寫過(guò)這樣的代碼，在所有CSS開(kāi)始前，先把marin和padding都設(shè)為0，以防不同瀏覽器的顯示效果不一樣。

*{
    margin: 0;
    padding: 0;
}

關(guān)于瀏覽器CSS樣式初始化，經(jīng)驗(yàn)不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個(gè)庫(kù)，Normalize.css，github star數(shù)量接近4萬(wàn)，選取展示其中幾個(gè)樣式設(shè)置，如下

html {
    line-height: 1.15; /* Correct the line height in all browsers */
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

body {
    margin: 0;
}

a {
    background-color: transparent; /* Remove the gray background on active links in IE 10. */
}

img {
    border-style: none; /*  Remove the border on images inside links in IE 10. */
}

通過(guò)CSS樣式初始化，相信能解決不少常規(guī)的兼容性問(wèn)題，接下來(lái)再看看瀏覽器的私有屬性。

2. 瀏覽器私有屬性

我們經(jīng)常會(huì)在某個(gè)CSS的屬性前添加一些前綴，比如-webkit- ，-moz- ，-ms-，這些就是瀏覽器的私有屬性。

為什么會(huì)出現(xiàn)私有屬性呢？這是因?yàn)橹贫℉TML和CSS標(biāo)準(zhǔn)的組織W3C動(dòng)作是很慢的。

通常，有W3C組織成員提出一個(gè)新屬性，比如說(shuō)圓角border-radius，大家都覺(jué)得好，但W3C制定標(biāo)準(zhǔn)，要走很復(fù)雜的程序，審查等。而瀏覽器商市場(chǎng)推廣時(shí)間緊，如果一個(gè)屬性已經(jīng)夠成熟了，就會(huì)在瀏覽器中加入支持。

但是為避免日后W3C公布標(biāo)準(zhǔn)時(shí)有所變更，會(huì)加入一個(gè)私有前綴，比如-webkit-border-radius，通過(guò)這種方式來(lái)提前支持新屬性。等到日后W3C公布了標(biāo)準(zhǔn)，border-radius的標(biāo)準(zhǔn)寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性

-o代表opera私有屬性

對(duì)于私有屬性的順序要注意，把標(biāo)準(zhǔn)寫法放到最后，兼容性寫法放到前面

-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg); 

每個(gè)CSS屬性寫這么一堆兼容性代碼，無(wú)疑是對(duì)生命最大的浪費(fèi)，后面我們會(huì)講一下通過(guò)自動(dòng)化插件來(lái)處理這塊。

3. CSS hack

有時(shí)我們需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過(guò)程，叫做CSS hack!

CSS hack的寫法大致歸納為3種：條件hack、屬性級(jí)hack、選擇符級(jí)hack。

條件hack

條件hack主要針對(duì)IE瀏覽器進(jìn)行一些特殊的設(shè)置

語(yǔ)法：

取值

keywords

if后面跟的條件共包含6種選擇方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：指定是否IE或IE某個(gè)版本。關(guān)鍵字：空

大于：選擇大于指定版本的IE版本。關(guān)鍵字：gt（greater than）

大于或等于：選擇大于或等于指定版本的IE版本。關(guān)鍵字：gte（greater than or equal）

小于：選擇小于指定版本的IE版本。關(guān)鍵字：lt（less than）

小于或等于：選擇小于或等于指定版本的IE版本。關(guān)鍵字：lte（less than or equal）

非指定版本：選擇除指定版本外的所有IE版本。關(guān)鍵字：!

version

IE瀏覽器版本，如6、7、8

IE10及以上版本已將條件注釋特性移除，使用時(shí)需注意。

舉例

屬性級(jí)hack

屬性hack就是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴。

語(yǔ)法：

selector{?property:value?;}

取值：

_：選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。

*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過(guò)業(yè)界對(duì)（*）的認(rèn)知度更高

9：選擇IE6+

0：選擇IE8+和Opera15以下的瀏覽器

舉例

如在不同的IE瀏覽器中設(shè)置不同的顏色，注意順序：低版本的兼容性寫法放到最后

.test {
  color: #0909; /* For IE8+ */
  *color: #f00;  /* For IE7 and earlier */
  _color: #ff0;  /* For IE6 and earlier */
}

選擇符級(jí)hack

選擇符級(jí)hack是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。

語(yǔ)法：

 selector{ sRules }

取值：

常見(jiàn)的選擇符級(jí)hack有

*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen9{...}只對(duì)IE6/7生效
@media