CSS ninja: Secure CSS hacks secret

How do you deal with IE, a tough monster? Do I use CSS Hacks or conditional comments? I'm afraid there is no perfect solution. Every designer or front-end code farmer will have an effective way to defeat IE. All these technologies have their own advantages and disadvantages. Let's take a look.

Use conditions to determine whether a style sheet is introduced

This makes it easy for us to load the specified style sheet in the IE browser by using the conditional annotation statement, while other non-IE kernel browsers automatically ignore this lame HTML annotation. The following is an example:

<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]--><!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]--><!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]-->

This code will cause IE8, IE7, and IE6 to load corresponding style files. In fact, this is awesome. It is possible to add conditional annotations to different style sheets by browser, but multiple style files must be maintained at the same time.

CSS hacks

In fact, this is a very big solution, which can solve the problem and does not comply with the specifications. Most people are helpless and forced to stop looking at it. I have talked about CSS Hacks of IE in the previous "CSS hacks for IE and IE can be perfect. Now we can briefly review several common methods:

_selector{property:value;} //IE6*selector{property:value;} //IE6 & IE7selector{property:value\9;} //IE6 & IE7 & IE8

As most people know, I won't say much about it. However, a real problem is that,\9This hack is not only effective for IE8 and older versions, but also affects the final release of IE9. The various defects of IE9 in CSS are fixed. What if IE10 and IE11 are coming in the future? Apparently\9It is not a rigorous security solution.

In addition, differentX-UA-CompatibleThe Mode also affects the IE rendering differences of different versions. We recommend that you set the default rendering mode as follows:

<Meta http-equiv = "X-UA-Compatible" content = "IE = Edge"> // standard IE Mode

What about it? Why? It's okay. There's something more radical below.

Insert a specified class using Conditions

Since conditional judgment can be used, it is better to directly output the hook class used to set the style for different IE versions. Directly run the Code:

<! -- [If! IE]> 
If IE9 and IE10 want to see any more magical behavior art, just add the specified role class. And your style sheet will become exceptionally clean, clean, and beautiful:
.selector { color: black; }.ie8 .selector { color: green; } /* IE8 */.ie7 .selector { color: blue; } /* IE7 */.ie6 .selector { color: red; } /* IE6 */
Of course, the standard modeX-UA-CompatibleThe declaration is still required, in case the page is forced to be rendered according to the earlier version of IE.
References for condition comments: http://msdn.microsoft.com/en-us/library/ms537512.aspx