Various code solutions for CSS Browser compatibility

Web design encountered one of the biggest trouble is the Web page on the compatibility of different browsers, because IE 6.0/ie 7.0/firefox 2/opera 9 and other mainstream browsers to CSS parsing is not nearly the same, resulting in the design of the page effect is not the same, So what method can effectively solve different browsers different page effects of the problem? Widely used is the CSS Hack, that is, the use of special CSS to define the Web page in different browser design style, for different browsers to write different CSS, maximize compatible browsers.
In general, I will take into account the IE 6.0/ie 7.0/firefox 2.0 Browser, the following is the use of the more frequent CSS hack techniques:
The most widely used is!important, it can be for IE (ie 7.0 can correctly understand!important) and non-IE browser to set different styles, as long as the non-IE browser style after the!important, you can focus on its priority. So in order to take account of the difference between IE 6.0 and Firefox, I will use!important.

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.
10, ie5.x filter, only ie5.x visible
@media TTY {
I{content: "\";/* ""/}} @import ' Ie5win.css '; /*”;}
}/* */
11, Ie5/mac filter, generally do not need
/*\*//*/
@import "Ie5mac.css";
/**/
--------------------------------------------------------------------
12, ie if conditions hack www.xxcss.com to provide
<!--[if ie]> only IE <! [endif]--> all IE can be identified
<!--[if IE 5.0]> only IE 5.0 <! [endif]--> only IE5.0 can identify
<!--[if GT ie 5.0]> only ie 5.0+ <! [endif]--> IE5.0 shifting IE5.5 can be identified
<!--[if LT ie 6]> only ie 6-<! [endif]--> only IE6 can be recognized
<!--[if GTE ie 6]> only ie 6/+ <! [endif]--> IE6 and ie5.x below IE6 are recognizable.
<!--[if LTE IE 7]> only IE 7/-<! [endif]--> only IE7 can be recognized
-----------------------------------------------------------------
You are writing CSS when the style sheet with a browser identifier on the line, the different browsers are as follows:
IE can recognize *, standard browser (such as FF) does not recognize *;
IE6 can recognize *, but can not identify!important;
IE7 can recognize the *, also can identify!important;
FF does not recognize *, but can identify!important;
such as style= "*width:10px;! Important width:20px; "
In this way, under the IE6 width of 10px, under the width of IE7 20px
-----------------------------------------------------------------

The latest CSS compatibility solution, so that your style is perfect compatible with the major browsers, this program is mainly used to solve safari, Opear is in the test time incidentally tried, the results found unexpectedly also line, so by the way also solved.
. e {/*ff op*/
Background-color: #FF0000
}
html*. E{/*sa IE7 op*/
Background-color: #FF00FF
}
*+html. e{
Background-color: #000000;/*op*/
*background-color: #0000FF;/*ie7*/
}
* HTML. e{/*ie6*/
Background-color: #00FFFF
}
Tested via FF2, OP9.21, OP9.10, Sa3.0.3 (PC), IE7, and IE6 if you have tested on other browser versions