CSS compatibility issues, for a single browser

CSS Hack for Firefox:

@-moz-document Url-prefix () {. selector {attribute:value;}}
2

CSS Hack for WebKit kernel and Opera browser:

@media all and (min-width:0) {. selector {attribute:value;/forWebKit and opera/}}
3

From this style we can only distinguish the WebKit kernel browser and opera browser from other browsers, but we cannot distinguish between them, so we also need to add a style to the above style:

@media screen and (-webkit-min-device-pixel-ratio:0) {. selector {attribute:valueforwebkit;/=webkit/} }
4

Since this style is for WebKit, the previous style will be overwritten, so, through these two styles can distinguish between WebKit and opera, opera's attribute value takes Value,webkit attribute value to take valueforwebkit.
5

In fact, as a general rule, we generally deal with the compatibility problem on IE, but when faced with the need to deal with Firefox or Chrome compatibility issues, be sure to check the structure of the Web page is reasonable and the use of notes is standard, until forced to use the above CSS Hack.

CSS compatibility issues, for a single browser