今天我們一起來聊一聊如何處理CSS兼容性問題。

因為瀏覽器廠商眾多，采用的瀏覽器內核各不相同，所以對CSS語法支持的程度也各不相同，有的可能是語法不支持，有的可能是語法支持但是效果表現形態不同，反正都是因為瀏覽器不同所造成的。以下我們舉兩個IE瀏覽器常見的問題，來說明兼容問題的解決。

圖片邊框問題

在IE10以下的瀏覽器中，給圖片添加鏈接，默認會產生一個藍色的邊框，而高級瀏覽器卻沒有這個現象，所以需要給圖片加一個屬性來解決這個CSS兼容性問題。

img {
 border:none;
}

浮動雙邊距問題

IE6中，第一個浮動到父元素邊上的元素，如果含有該方向的margin值，那么margin會以雙倍顯示。效果見上圖。

這個問題只會發生在浮動行的第一個浮動元素上。準確的說：應該是每一行的第一個元素都會受此影響。

為了解決該問題，需要給浮動元素添加以下代碼:

display:inline;

這種兼容性問題非常多，我們需要一個專門的庫，來可以解決大部分這樣的兼容性問題，這個庫即是：Normalize CSS。Normalize CSS可以看成是一種Reset CSS的替代方案。

Normalize CSS的作用

• 保護有用的瀏覽器默認樣式而不是完全去掉它們

• 一般化的樣式：為大部分HTML元素提供

• 修復瀏覽器自身的bug并保證各瀏覽器的一致性

• 優化CSS可用性：用一些小技巧

• 解釋代碼：用注釋和詳細的文檔來

所以強烈建議在開發網頁的時候，首先要引入Normalize CSS然后再進行具體的樣式編寫。

如何使用Normalize.css

首先，安裝或從Github下載Normalize.css，接下來有兩種主要途徑去使用它。

策略一：將normalize.css作為你自己項目的基礎CSS，自定義樣式值以滿足設計師的需求。

策略二：引入normalize.css源碼并在此基礎上構建，在必要的時候用你自己寫的CSS覆蓋默認值。