html - css中有哪些常见的兼容性问题?

Question

各位高手总结下。

Answer 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_(Cascading_Style_Sheets)
caniuse

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