Front-end common browser compatibility issues

1, the default label different browsers outer patch (margin) and the patch (padding) different
solutions: 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
----------------
Disclaimer: this article is the original article CSDN bloggers "yinol", following the CC 4.0 by-sa copyright agreement, reproduced, please attach the original source and this link statement.
Original link: https: //blog.csdn.net/wanmeiyinyue315/article/details/79654984

Guess you like

Origin www.cnblogs.com/jia-bk-home/p/11373449.html