Summary of Common Browser hack skills

If you often need front-end pages, you must solve the browser compatibility problem of pages more or less. Most browser compatibility problems are also concentrated on compatibility with the IE series. Here we will summarize the CSS hack of the IE series and record it for future reference.

IE hack

The hack of IE browsers is roughly as follows:

• _ Nowamagic: 1px; ----------- IE6
• * Nowamagic: 1px; ----------- IE7
• Nowamagic: 1px \ 0; ---------- ie89
• Nowamagic: 1px \ 9 \ 0; -------- ie9
• : Root nowamagic: 1px; ---- ie9 (This method may be used if ie9 is still faulty)

In this way, it is basically compatible with all IE. Metropolitan entertainment city

 

In addition, Firefox and chrome also have their proprietary hack. The detailed hack method and usage example are as follows:

Hack of Firefox and chrome

Firefox:

@-Moz-document URL-prefix ()/* When writing the outer part of the selector (only available here): Firefox only */

Chrome:

@ Media screen and (-WebKit-Min-device-pixel-ratio: 0)/* When writing the outer part of the selector (only this part can be written): chrome only */

Example:

@-moz-document url-prefix()    /*Firefox*/{body{background-color:pink;}}

The browser parses CSS from the front to the back and uses the last style declaration.

CSS instance

. Color {background-color: # cc00ff;/* all browsers will be purple */background-color: # ff0000 \ 9; /* IE6, IE7, and IE8 will display red */* Background-color: # 0066ff;/* IE6 and IE7 will change to blue */_ Background-color: #009933; /* IE6 turns green */}

Background: red;/* Valid for FF opera and Safari */# Background: Blue;/* Valid for IE6 and IE7 */_ Background: green; /* only valid for IE6 * // */Background: orange; * // ** only valid for IE8 **/! Important/* ff, IE7 valid */* ie valid */

IE8 is compatible with IE7. A simple line of code allows IE8 to automatically call the rendering mode of IE7. You only need to add the following HTTP meta-tag to the page: <meta http-equiv = "X-UA-compatible" content = "Ie = emulateie7"/>, as long as IE8 reads this label, it automatically starts the IE7 compatibility mode to ensure the full display of the page.

This is generally the case for mixing:

: Root. demo {Background: #963 \ 9;/* only applies to ie9 */}. demo {width: 300px; Height: 200px; Background: #036;/* Applicable to all browsers */Background: # 09f \ 9;/* IE6 ~ Ie9 */Background: # 09f \ 0;/* IE8 ~ Ie9 */Background: # 09f \ 0/;/* IE8 */* Background: # f60;/* IE6/IE7 */+ Background: # f60; /* IE6/IE7 */@ Background: # f60;/* IE6/IE7 */> Background: # f60;/* IE6/IE7 */_ Background: # CCC; /* IE6 */} @ media all and (min-width: 0 ){. demo {Background: # f06;/* WebKit and opera */} @ media screen and (-WebKit-Min-device-pixel-ratio: 0 ){. demo {Background: #609;}/* WebKit (& opera9.2 )*/}

Summary of Common Browser hack skills