Browser on the market, many different types, different browser kernel are not the same, so each browser parses the web page there are some differences.
Browser kernel is divided into two, one rendering engine, and the other is js engine, more inclined to say that the core rendering engine.
Common browser kernel:
Common browser kernel can be divided into four kinds: Trident, Gecko, Blink, Webkit
common compatibility problems:
1, different browsers default outer label patch (margin) and within the patch (padding) different
solution: css increase in wildcard * {margin: 0; padding: 0;}
2, IE6 from bilateral issues; set float in IE6, but also set the margin, there will be a problem margins
Solution: Set display: inline;
3, when the height of the Settings tab is less than 10px, in IE6, IE7 will exceed the height own set of
solutions: beyond the height of the label set overflow: hidden, or set the value of line-height less than the height of your settings
4, there are pictures default spacing
Solution: Use a float for the layout img
5, IE9 your browser can not use the opacity
Solution:
opacity: 0.5; filter: Alpha (opacity = 50); filter: ProgID: DXImageTransform.Microsoft.Alpha (style = 0, opacity = 50);
6, the overlap margin; when two adjacent elements are provided with margin margin, margin will take the maximum, minimum discarded;
Solution: In order to prevent the overlapping edge, a parent element may be added to the sub-elements, and the parent element is disposed overflow: hidden;
7, cursor: hand hand display type is not supported on safari
solutions: unified use cursor: pointer
8, two block-level element, the parent element is provided overflow: auto; child element set position: relative; and a height greater than the parent element in IE6, IE7 will be hidden and not overflow;
solution: parent element set position: relative
