Solve the compatibility problem of IE5/IE5.5/IE6/FF-CSS

Convert from blue to ideal
Author: bias
Original address http://www.blueidea.com/tech/site/2006/3296.asp
I have found several independent ie browsers of different versions, just to try the page compatibility problem. I don't know if I don't try it. The pages that are okay in IE6 and FF are in a mess in IE5 and IE5.5. I have heard that IE5 is a "dingtalk user" made by WEB standards and I have to believe it now.

If there is a problem, look for a solution. After searching on the Internet, there are still a lot of related articles. I think the most direct method is "IE condition annotation ", you can easily write styles for different IE versions. However, writing a style for each version is not conducive to file optimization.

After finding some related css hack, I thought I could write the HACK of IE5/IE5.5/IE6/FF together. After testing, I finally found a good method, let's take a look at how to implement it:
Everyone knows how to use it! The impant ant declaration can improve the application priority of a specified style rule, as shown in the following example:
-------------------------------------------------Copy codeThe Code is as follows: E1 {
Background-color: red! Important;/* Raise priority */
Background-color: blue;
}
-------------------------------------------------

However, this may cause a problem in IE. I have read my "about CSS style sheet priority" and "about CSS style sheet priority Addendum", and you will know that it is used in IE6 and FF! Important declaration can improve the priority level, but in IE6! The important declaration is not absolute. It will be replaced by the subsequent attributes with the same name. That is to say, in the preceding example, IE6 applies the value of the last background color, that is, "blue". In FF, the value of the background color is "red ". Based on this, we can split the FF and IE styles.
Okay, solved the FF and IE problems. Now we can solve IE's own problems.
I have read some comments after I have read another way of writing "bypassing IE6 to support IE5-IE also supports"> ". Can I recognize it if I use"> "IE? Let's look at an example:
-------------------------------------------------
E1 {
Background-color: red;
> Background-color: blue;
}
-------------------------------------------------

In FF, the background color is red, and in IE, the background color is blue. According to the style redefinition rules, if the browser can recognize "> ", the blue background should be obtained, so we can know that ">" can only be identified by IE, which is very important! You will know later. (Note: I have tested other symbols, such as "~". , "'", "<", And so on, are only recognized by IE. In order to thank doodle, we recommend "> ")

Let's look at an example:
-------------------------------------------------
E1 {
>/* IE only */background-color: black;
>/* IE only */background-color/* IE5.5 */: green;
}
-------------------------------------------------

This example gets a black background in IE6, a green background in IE5.5, and a black background in ie5. This shows that the second definition can only be identified by IE5.5. This is an early release of HACK and relevant information can be found on the Internet, note that there is a space after the attribute name. So far, we have separated FF, IE5.5, and IE6. What about IE5? In fact, we only need to separate IE5 from IE6 now. Let's take a look at the example:
-------------------------------------------------
E1 {
>/* IE only */background-color: red;/* IE5 */
}
E1/* IE5.5 + */{
>/* IE only */background-color: black;
}
-------------------------------------------------

Here we use another HACK, which is "E1/**/{}". This definition can be identified only in IE5 or later versions. In this example, the background color in IE5 is red, and in IE5 or later versions, the background color is black.
Finally, different versions of browsers are separated, so that we can define different styles for different browsers. Let's take 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;
}
-------------------------------------------------

Note that the smoothness of the "background-color" definition in the above example cannot be changed, that is, the FF-IE5-IE6-IE5.5. Add ">" to the definition of IE before the attribute, because the "E1/**/{}" HACK can be identified in FF. You may think that the above example cannot be written:
-------------------------------------------------
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;
}

-------------------------------------------------

How many bytes can be saved? Yes, but HACK is not a standard. If you abuse HACK, it will be farther and farther away from the standard!