Solve ie5 ie5.5 IE6 Firefox compatibility with CSS hack

For the viewing effect of different browsers, we certainly do not need to write a style for different versions of each browser. Here we use "ie conditional annotation ".

I found some related CSS hack and summarized several methods.

1. Difference between FF and IE

1-1
First, of course! The important algorithm can improve the application priority of a specified style rule, as shown in the following example:

InsertCode: Div {
Background-color: red! Important;
Background-color: blue;
}

Because! Important declaration is not absolute in IE6. 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 ".

1-2
Another method is that IE can recognize ">" and other symbols, such as "~". , "'", "<", Etc., can only be identified by IE,But it is unreasonable ,! Important is compliant with the standard. So

Insert code: Div {
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 ">" is only recognized by IE.

In this way, we can split the FF and IE styles. The following describes how to solve IE's own problems.

2. Different Versions of ie5.5 and IE

Let's look at an example:

Insert code: Div {
> Background-color: black;
> Background-color/* ie5.5 */: green;
}

In this example, ">" is used. Only Internet Explorer can recognize it. in IE6, a black background is obtained. In ie5.5, a green background is obtained. In ie5, a black background is also obtained. This illustrates the definition of the second sentence.Only ie5.5 can recognizeThis is a long-known hack. You can find relevant information 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.

3. Difference Between ie5 and ie5.5 +

Insert code: Div {
> Background-color: red;
}
Div/* ie5.5 + */{
> Background-color: black;
}

Here we use another hack, that is, "DIV/**/{}". 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.

4. Complete hack
In this way, we can define different styles for different browsers. Let's take a complete example:

Insert code: Div {
Width: 500px;
Height: 50px;
Background-color: red! Important;/* FF */
Background-color: Blue;/* ie5 */
Text-align: center;
}
Div/* ie5.5 + */{
>/* Ie Only */background-color: black;/* IE6 */
>/* Ie Only */background-color/* ie5.5 */: green;
}

note that the smoothness of the definition of "Background-color" 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 "DIV/**/{}" Hack can be identified in ff.