List of browser compatibility issues

Here are a list of browser compatibility issues that you can refer to when you write CSS.

1, only IE7 and IE5.0 can be identified
*+html Select {...}
This hack can be used when faced with the need to make styles only for IE7 and IE5.0.
2, only IE7 can be identified
*+html Select {...! important;}
This hack can be used when faced with the need to do IE7 style only.
3, IE6 and IE6 the following identification
* HTML Select {...}
This place should pay special attention to many blogs have written is IE6 hack actually ie5.x also can recognize this hack. Not recognized by other browsers.
4. html/**/>body Select {...}
This sentence is the same as the previous one.
5, only IE6 not recognized, shielding IE6
Select {display/* shield Ie6*/:none;}
This is mainly a CSS annotation to separate a property and a value, note before the colon.
6, only IE6 and IE5 not recognized, shielding IE6 and IE5
select/**/{display/*IE6,IE5 does not recognize */:none;}
This differs from the preceding sentence by having a CSS annotation between the selector and the curly brace. Do not shield IE5.5
7, only IE5 not recognized, shielding IE5
SELECT/*IE5 do not recognize */{...}
This sentence is a comment that removes the attribute area from the previous sentence. Only IE5 are not recognized, IE5.5 can be identified.
8, the box model solves the method
SELCT {width:ie5.x width; voice-family: "}\" "; Voice-family:inherit; Width: correct widths;}
The Purge method of the box model is not handled by!important. This should be clear.
9, only opera recognition
@media all and (min-width:0px) {select {...}}}
Make a separate setting for the Opera browser.
The above are written in some CSS hack, these are used to solve the local compatibility problem, if you want to separate the content of compatibility, may wish to try the following several filters. Some of these filters are written in CSS through the filter to import special style, there are written in HTML through the conditions to link or import the required patch style.
1. Distinguishing between FF and IE

1-1
First of all, the!important Dafa, of course, can elevate the application precedence of the specified style rule, as in the following example:
Insert Code:
div{
Background-color:red!important;
Background-color:blue;
}
Because the!important declaration is not absolute in IE6, it is replaced by a later property 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."

1-2
There is also a way, ie browser can identify ">" and some other symbols, such as "~", "'", "<" and so on, are only IE can be identified, but unreasonable,!important is in line with the standard. So
Insert Code:
div{
background-color:red;
>background-color:blue;
}
In the FF is the background color red, and in IE, the background color is blue, according to the style redefined rules, if the browser can recognize ">", you should get the blue background, so you can know that ">" only IE can recognize.

In this way, we can separate the FF and IE styles from each other. Here's how to solve IE's own problem.

2. Distinguish IE5.5 from other versions of IE

Look at an example:
Insert Code:
div{
>background-color:black;
>background-color/*ie5.5*/: Green;
}
This example uses ">", which only IE can identify, gets a black background in the IE6, a green background in IE5.5, and a black background in 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.

3. Distinction between IE5 and ie5.5+
Insert Code:
div{
>background-color:red;
}
div/*ie5.5+*/{
>background-color:black;
}
Here we use a hack, is "div/**/{}", 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.

4. The Complete hack
So we can define different styles for different browsers. Let's look at 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;
}
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 "div/**/{}" hack is recognized in FF.