簡單的說一下瀏覽器兼容問題-前端筆記

• Respond.js

Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢兼容響應式佈局

• css reset

css reset重置樣式，清除瀏覽器默認樣式，並配置適合設計的基礎樣式（強調文本是否大多是粗體、主文字色，主鏈接色，主字體等）。reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易於保持各瀏覽器渲染的一致性。例如 yui3 reset 中的一段：

ol, ul {list-style: none}h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}

• normalize

Normalize.css 是一個可定製的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準;是在現代瀏覽器環境下對於CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴於研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。 這是一個現代的，HTML5-ready 的 CSS 重置樣式集。bootstrap就使用了它，github的地址為：https://github.com/necolas/normalize.css/， Normalize.css做了以下幾件事：

• 保護有用的瀏覽器默認樣式而不是完全去掉它們一般化的樣式：為大部分HTML元素提供修復瀏覽器自身的bug並保證各瀏覽器的一致性優化CSS可用性：用一些小技巧解釋代碼：用註釋和詳細的文檔來Modernizr

Modernizr是一個開源的JS庫，它使得那些基於訪客瀏覽器的不同（指對新標準支持性的差異）而開發不同級別體驗的設計師的工作變得更為簡單。它使得設計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。

可能用到的網站和兼容工具

CSS屬性兼容查詢

caniuse.comHack 的寫法查詢 browserhacks.com

html5shiv.js

respond.js

css reset

normalize.css

Modernizr

閱讀更多 前端小學生 的文章

關鍵字: 兼容性問題 CSS 瀏覽器