Front-end Web browser compatibility issues and solutions

Common compatibility problems:
1, different browsers label the default margins (margin) and padding (padding) different
solutions: css increase in the 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

A skills: css hack

I can use a browser hack into three categories: ie6; ie7 and travel; other (ie8 chrome ff safari opera, etc.)

hack ie6 understanding of an underscore _ and the asterisk *
hack IE7 travel asterisk * are met (including the above question 6! important can be considered a hack is, but less practical.)

　　For example, such a css set height: 300px; * height: 200px; _height: 100px;
ie6 browser to read height: 300px time will be considered at high 300px; read on, he recognized * heihgt, so when read ie6 * height: 200px time will override the
conflict before a set, that the height is 200px. Read on, ie6 also recognized _height, so he will overwrite the settings 200px high, the height is set to 100px;
IE7 and travel is the same read from a height of 300px set down. When they read * height200px would stop, because they do not know _height. They will highly
resolve to 200px; the rest of the browser only recognize the first height: 300px; height so they will resolve to 300px.

Because the same and conflicting attributes a priority setting will overwrite the previous one, so the order of writing is very important.

/ * CSS attribute level * Hack /
Color: Red; / * all * browsers can identify /

_color: red; / * IE6 identified only * /

* Color: red; / * IE6, IE7 recognition * /

+ Color: red; / * IE6, IE7 recognition * /

* + Color: red; / * IE6, IE7 recognition * /

[Color: red; / * IE6, IE7 recognition * /

color:red\9; /* IE6、IE7、IE8、IE9 识别 */

color: red \ 0; / * IE8, IE9 recognition * /

color: red \ 9 \ 0; / * * Only IE9 identification /

color: red \ 0; / * * Only IE9 identification /

! Color: red important; / * IE6 does not recognize the danger of important * /!

/ * * The CSS selectors stage Hack /
* {HTML #demo Color: Red;} / * * Only IE6 identification /

* + Html #demo {color: red;} / * 仅 IE7 Identification * /

body: nth-of-type ( 1) #demo {color: red;} / * IE9 +, FF3.5 +, Chrome, Safari, Opera may identify
* /
head: First-body #demo {Child + Color: Red; } / * IE7 +, FF, Chrome, Safari, Opera may identify * /

: root #demo {color: red \ 9;}: / * * Only IE9 identification /
fewer floating, the less code, will be more flexible page, the page will be more scalable.

CSS attribute prefix semantics:

• Use Tridentbrowser IE、Maxthon、TTkernel: ;
• Use Geckobrowser kernel: Netcape6and above versions FireFox;
• Use Prestobrowser kernel: Opera7and above;
• Use Webkitbrowser Safari、Chromekernel: .
• Internet reference sources: https://www.cnblogs.com/kzxiaotan/p/11846926.html