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

Question

各位高手总结下。

Answer 1

Summary of browser rendering compatibility issues: http://www.w3help.org/zh-cn/causes/

Most compatibility issues are due to historical reasons, such as: IE6 does not support border-radius and IE7/8 does not support css3 attributes.

Then because the w3c standard is not clear enough or other reasons, various browser manufacturers have different understandings of the standard, for example:

• Each browser understands the 'baseline' position of commonly used inline replacement elements differently
• Each browser has different calculations of the height of the containing block generated by elements with the 'min-height' and 'max-height' attributes set
• Each browser has different judgments on the static position of absolutely positioned elements after inline elements in containing blocks using shrink-to-fit width
• Each browser has different height calculations for block-level elements or inline block elements that contain a percentage unit height within a containing block that does not explicitly set a height
• There are differences in the 'shrink-to-fit' algorithm of the containing block of the IMG element where the 'min-width' or 'max-width' value unit is a percentage in each browser
• There are differences in the calculated width of block-level elements whose width is not explicitly set by browsers when using margin to overflow the containing block with a width of 0

The most frustrating thing is that the browser does not follow the standards and creates its own rendering logic. Such as:

• Each browser has different support for the 'display' attribute value
• The :visited :hover :active pseudo-class of the A element in IE6 IE7(Q) IE8(Q) does not calculate the pertinence according to the algorithm required by the specification
• There is an error in the interpretation of the 'clear' attribute on floating elements in IE6 IE7 IE8(Q), making its own position and the position of the floating elements behind it different from that in other browsers
• Chrome Safari considers 'float:center' to be a legal value and evaluates to 'none'

Thanks to @Humphry for the addition:

This site is no longer updated. Here is a richer compatibility list: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
caniuse

I would also like to add:
1. Nowadays, front-end development is rarely compatible with IE6/7.
2. The CSS compatibility problem of the latest version of browsers is getting smaller and smaller, and all browsers are becoming consistent.
3. The large number of applications of responsive design has made compatibility with screens of various sizes and various devices a more important issue in front-end development.