浏览器渲染兼容性问题汇总: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
我也补充一下:
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。