問題描述

各位高手總結下。

問題解答

回答1：

瀏覽器渲染兼容性問題匯總：http://www.w3help.org/zh-cn/causes/

大部分兼容性問題是因為歷史原因，比如：IE6不支持border-radius和IE7/8不支持css3屬性。

然后是因為w3c的標準不夠清晰或其他原因導致各瀏覽器廠商對標準的理解不同，例如：

各瀏覽器對常用行內替換元素的 ’baseline’ 位置理解不同各瀏覽器對設定了 ’min-height’、’max-height’ 特性的元素生成的包含塊的高度計算存在差異各瀏覽器對使用 shrink-to-fit 寬度的包含塊中行內元素后的絕對定位元素的靜態位置判斷存在差異各瀏覽器對于未明確設定高度的包含塊內包含百分比單位高度的塊級元素或行內塊元素的高度計算存在差異各瀏覽器中 ’min-width’ 或 ’max-width’ 值單位為百分比的 IMG 元素的包含塊的 ’shrink-to-fit’ 算法存在差異各瀏覽器對未明確設定寬度的塊級元素通過 margin 導致溢出其寬度為 0 的包含塊時的寬度計算值存在差異

最坑的是瀏覽器不按標準來，自己搞一套渲染邏輯。如：

各瀏覽器對 ’display’ 特性值的支持程度不同IE6 IE7(Q) IE8(Q) 中 A 元素的 :visited :hover :active 偽類未按規范要求的算法來計算針對性IE6 IE7 IE8(Q) 中對浮動元素上 ’clear’ 特性的解釋出現錯誤，使其自身位置和其后浮動元素的位置與其他瀏覽器中不同Chrome Safari 認為 ’float:center’ 是合法值且其計算值為 ’none’

感謝@Humphry的補充：

這個站點已經不更新了，這里還有一份更加豐富的兼容性列表： http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29caniuse

我也補充一下： 1. 現在前端開發很少再兼容IE6/7了。 2. 最新版的瀏覽器的css兼容性問題越來越小，各瀏覽器趨于一致。 3. 響應式設計的大量應用，導致兼容各種尺寸的屏幕和各種設備成了前端開發更重要的問題。