公共的樣式，相容各種瀏覽器

清談normalize.css

normalize.css只是乙個很小的css檔案，但它在預設的html元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的css reset

, normalize.css是一種現代的、為html5準備的優質替代方案。normalize.css現在已經被用於twitter bootstrap

、html5 boilerplate

、gov.uk

、css tricks

以及許許多多其他框架、工具和**上。

#### 問題： 那我同時link兩個css的話，會不會有衝突？

詳細說：我使用normalize.css是為了像你所說的對幾乎所有的預設樣式進行重置，讓所有的瀏覽器上對於未定義的樣式瀏覽效果達到一致，那我再link我自己的style.css是不是也可以在他的基礎上達到我的效果？

1、normalize.css 保護了有價值的預設值

reset通過為幾乎所有的元素施加預設樣式，強行使得元素有相同的視覺效果。相比之下，normalize.css保持了許多預設的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設定樣式。當乙個元素在不同的瀏覽器中有不同的預設值時，normalize.css會力求讓這些樣式保持一致並盡可能與現代標準相符合。

2、normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了reset所能做到的範疇。關於這一點，normalize.css修復的問題包含了html5元素的顯示設定、預格式化文字的font-size問題、在ie9中svg的溢位、許多出現在各瀏覽器和作業系統中的與表單相關　的bug。

可以看以下這個例子，看看對於html5中新出現的input型別search，normalize.css是如何保證跨瀏覽器的一致性的。

``` /**
* 2. addresses box-sizing set to border-box in s5, chrome (include -moz to future-proof)
*/1 
*/-moz-box-sizing:content-box;-webkit-box-sizing:content-box; /*
2 */
box-sizing:content-box;}/*
* * removes inner padding and search cancel button in s5, chrome on os x
*/input[type="search"]::-webkit-search-decoration,
}

## 結語

無論從適用範疇還是實施上，normalize.css與reset都有極大的不同。嘗試一下這兩種方法並看看到底哪種更適合你的開發偏好是非常值得的。這個專案在github上以開源的形式開發。任何人都能夠提交問題報告或者提交補丁。整個專案發展的過程對所有人都是可見的，而每一次改動的原因也都寫在commit資訊中，這些都是有跡可循的。

瀏覽器相容樣式處理

1 不同瀏覽器不同字首樣式 moz 火狐等使用mozilla瀏覽器引擎的瀏覽器 webkit safari,谷歌瀏覽器等使用webkit引擎的瀏覽器 o opera瀏覽器 早期 ms internet explorer 不一定 2 ie下相容處理如下 9 0相容ie9ie10 padding lef...

各種瀏覽器相容問題

js中setattribute 的相容性 class和classname相容方法 object.setattribute class content 在ie8 chrome 火狐 opera10中都能設定成功 但是在ie7下無法設定。object.setattribute classname con...

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...