摘要：關于瀏覽器樣式初始化，經驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，，數量接近萬，選取展示其中幾個樣式設置，如下通過樣式初始化，相信能解決不少常規的兼容性問題，接下來再看看瀏覽器的私有屬性。

前端是一個苦逼的職業，不僅因為技術更新快，而且要會的東西實在太多了（如果全寫出來，那真是一籮筐），更讓人頭疼的是，還要面臨各種適配、兼容性問題。

一直以來都是頭痛醫頭腳痛醫腳，沒有進行系統的梳理，整個思路和方向全是混亂的，所以非常想把最近整理的，CSS瀏覽器兼容性的常見解決思路和方案，分享給大家，一起進步。

為什么會有瀏覽器兼容性問題

還不是因為瀏覽器廠商太多了！

Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全瀏覽器，qq瀏覽器，世界之窗，TT，搜狗，opera，maxthon（傲游）……

關鍵是不同廠商，甚至同一廠商不同版本，對同一段CSS的解析效果也不一致，這就導致了頁面顯示效果不統一，也就帶來了兼容性問題。

多么希望Chrome能夠一統江湖啊~~

目前各瀏覽器市場份額

瀏覽器這么多，我們也不可能每一個都要去兼容，對于用戶量一般的產品，把主流瀏覽器的適配做好，就已經很不錯啦。

根據世界市場權威調查機構NetMarketShare公布的2018年10月各瀏覽器市場占有率，可以看出Chrome的占有率達到了66.43%，這絕對是一個振奮人心的好消息。

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

CSS瀏覽器兼容性問題的解決思路和方案

今天，不想去關注太多細節問題， 比如那個css樣式需要我們去兼容，而是想討論一下大的解決思路，主要包括4個方面，瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSS hack語法和自動化插件。

1. 瀏覽器CSS樣式初始化

由于每個瀏覽器的css默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼，在所有CSS開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣。

*{
    margin: 0;
    padding: 0;
}

關于瀏覽器CSS樣式初始化，經驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，Normalize.css，github star數量接近4萬，選取展示其中幾個樣式設置，如下

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. */
}

通過CSS樣式初始化，相信能解決不少常規的兼容性問題，接下來再看看瀏覽器的私有屬性。

2. 瀏覽器私有屬性

我們經常會在某個CSS的屬性前添加一些前綴，比如-webkit- ，-moz- ，-ms-，這些就是瀏覽器的私有屬性。

為什么會出現私有屬性呢？這是因為制定HTML和CSS標準的組織W3C動作是很慢的。

通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很復雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經夠成熟了，就會在瀏覽器中加入支持。

但是為避免日后W3C公布標準時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日后W3C公布了標準，border-radius的標準寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：

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

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

-webkit代表chrome、safari私有屬性

-o代表opera私有屬性

對于私有屬性的順序要注意，把標準寫法放到最后，兼容性寫法放到前面

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

每個CSS屬性寫這么一堆兼容性代碼，無疑是對生命最大的浪費，后面我們會講一下通過自動化插件來處理這塊。

3. CSS hack

有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

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

條件hack

條件hack主要針對IE瀏覽器進行一些特殊的設置

語法：

取值

keywords

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

是否：指定是否IE或IE某個版本。關鍵字：空

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

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

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

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

非指定版本：選擇除指定版本外的所有IE版本。關鍵字：!

version

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

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

舉例

屬性級hack

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

語法：

selector{?property:value?;}

取值：

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

*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高

9：選擇IE6+

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

舉例

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

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

選擇符級hack

選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

語法：

 selector{ sRules }

取值：

常見的選擇符級hack有

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