CSS HACK in different browsers

I got a new project today and I have to finish it by the end. I wish I could finish the work smoothly. In the process of CSS framework, there are some browser compatibility issues encountered. So we will count the browser-specific CSS hack bar.

(Paste from Wikipedia)

2. CSS Hack for Firefox:

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

4. CSS Hack for WebKit kernel and Opera browser:

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

6. 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;/*only for webkit*/ }}

8. 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.

10. 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 HACK in different browsers