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_%28Cascading_Style_Sheets%29
caniuse

我也补充一下：
1. 现在前端开发很少再兼容IE6/7了。
2. 最新版的浏览器的css兼容性问题越来越小，各浏览器趋于一致。
3. 响应式设计的大量应用，导致兼容各种尺寸的屏幕和各种设备成了前端开发更重要的问题。