[CSS] IE5/IE5.5/IE6/FF compatibility

Css

Resolve IE5/IE5.5/IE6/FF compatibility issues--CSS

Previously found several different versions of the Internet Explorer can run independently, just to try to test the compatibility of the page. Don't try not to know, in IE6 and FF no problem page in IE5 and IE5.5 mess, has been heard that IE5 is a Web standard production of a "nail", now have to believe.

Since there are problems, then find a solution to it, a search on the Internet, the relevant articles or a lot of, think the most direct method or "ie condition annotation", very convenient for IE different versions of the writing style. However, this will have to write a style for each version, which is not conducive to file optimization.

After looking for some relevant CSS hack, feel that should be able to ie5/ie5.5/ie6/ff hack written together, after testing, finally found a good way, let's see how to achieve:
We all know that using!important declarations can elevate the application precedence of the specified style rule, as in the following example:
-------------------------------------------------
e1{
background-color:red!important;/* Promotion Priority * *
Background-color:blue;
}
-------------------------------------------------

But there's a problem in IE, I've seen my CSS style sheet precedence and about CSS stylesheet precedence, and you know that using!important declarations in IE6 and FF can improve priority, but!important declarations in IE6 are not absolute, It is replaced with the later attribute definition of the same name. That is, in the above example, IE6 applies the last background-color value, "Blue," and the background-color value in FF is "red." Based on this, we can leave the FF and IE styles separate.
OK, solve the problem of FF and IE, now to solve the problem of IE own.
Read the doodle of the "bypass IE6 support IE5 a way of writing-ie also support the" > "after feeling and hair, using" > "IE is really can recognize? Let's take a look at an example:
-------------------------------------------------
e1{
background-color:red;
>background-color:blue;
}
-------------------------------------------------

In FF, the background color is red, in IE, the background color is blue, according to the rules redefined by the style, if the browser can recognize the ">", you should get the blue background, so you can know that ">" only IE can identify, this is very important oh! In the back, everyone will know. (Note: I tested some other symbols, such as "~", "", "<" and so on, are only IE can identify, in order to thank Doodle, recommend the use of ">")

Let's look at another example:
-------------------------------------------------
e1{
>/*ie Only*/background-color:black;
>/*ie only*/background-color/*ie5.5*/: Green;
}
-------------------------------------------------

This example obtains a black background in the IE6, a green background in the IE5.5, and a black background in the IE5. This explains that the second definition only IE5.5 can identify, this is a very early release of the hack, you can find relevant information on the Internet, to note that there is a space after the attribute name. To this we have the FF, IE5.5, IE6 separate out, that IE5? In fact, now we just have to separate IE5 and IE6 OK, to see examples:
-------------------------------------------------
e1{
>/*ie only*/background-color:red;/*ie5*/
}
e1/*ie5.5+*/{
>/*ie Only*/background-color:black;
}
-------------------------------------------------

Here we use a hack, is "e1/**/{}", this definition in IE5 above version can be recognized. The result of this example is that the background color in the IE5 is red and the black background is obtained in the IE5 version.
Finally, the different versions of the browser are separated, so that we can define different styles for different browsers. Let's look at a complete example:
-------------------------------------------------
e1{
width:500px;
height:50px;
Background-color:red!important;/*ff*/
background-color:blue;/*ie5*/
Text-align:center;
}
e1/*ie5.5+*/{
>/*ie only*/background-color:black;/*ie6*/
>/*ie only*/background-color/*ie5.5*/: Green;
}
-------------------------------------------------

It should be noted that in the above example, the definition of "background-color" can not be changed smoothly, namely ff-ie5-ie6-ie5.5. The definition of IE is ">" before attributes, because the "e1/**/{}" hack is recognized in FF. Perhaps you would think that the above example is not written as:
-------------------------------------------------
e1{
width:500px;
height:50px;
background-color:red;/*ff*/
>background-color:blue;/*ie5*/
Text-align:center;
}
e1/*ie5.5+*/{
>/*ie only*/background-color:black;/*ie6*/
>/*ie only*/background-color/*ie5.5*/: Green;
}
-------------------------------------------------

So you can save a few bytes? Yes, but hack is not a standard, if abused hack, it will only be farther away from the standard!