CSS hack code and browse compatibility summary

About CSS hack things can be as little as possible. Found this article I write too complex, so re-streamlined, paste the code into the Jsfiddle, the aspect of modifying code and maintenance.

1, ie conditional annotation method, Microsoft official recommended hack way.

Effective only under IE <!--[if ie]> this text is only displayed on IE browser <! [endif]--> only takes effect under IE6 <!--[if IE 6]> this text is displayed only on IE6 browser <! [endif]--> only valid at IE6 or above <!--[if GT ie 6]> this text only appears on IE6 above version of IE browser <! [endif]--> is not effective on IE7 <!--[if! IE 7]> This text is displayed on a non-IE7 browser <! [endif]--> non-IE browser effective <!--[if! ie]><!--> This text is only displayed on non-IE browsers <!--<! [endif]-->

2. Combine common CSS hack code

Edit in Jsfiddle

• Css

Css

. csshack{BackgroundBlueBackgroundBlue\9;/*all ie*/BackgroundBlue\0/;/*ie8-ie9*/background/*\**/:Blue\9;/* ie7-ie8*/*BackgroundBlue/* or #background: Blue *//*ie6-ie7*/+BackgroundBlue/*ie7*/_background:Blue/*ie6*/}: Root. csshack{BackgroundBlue/* greater than or equal to ie9*/}/* IE9, IE10 */@MediaScreenand (min-Width7010) {. csshack {ColorRed}}/* IE + */@MediaScreenand (-ms-high-Contrast:Active), (-ms-high-Contrast:None) {#veintiun {ColorRed }}/* saf3+, chrome1+ */@MediaScreenand (-webkit-min-device-pixel-Ratio: 0) {#diez {ColorRed}}/* Iphone/mobile WebKit */@MediaScreenand (max-device-Width480px) {#veintiseis {ColorRed}}/* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red}/* Firefox 3.0+ */ #veinticinco, x :-moz-any-link, x :d efault {color: red} /* FF 3.5+ */body:not (:-moz-handler-blocked)  #cuarenta {color: red;}         

3.IE CSS Media, from here 3.IE CSS Media, from here

4.button Reset CSS style compatible IE6,IE7

button in IE6, IE7 under the compatibility, need to recharge CSS foroverflow:visible

5. Let IE6 support Max-width,min-width

. sector{max-width:500px; _width:expression ((documentelement.clientwidth>500)? " 500px ":" Auto "); min-width:300px; _width:expression ((documentelement.clientwidth<300)? " 300px ":" Auto ");}

6.ie6 under certain circumstances line-height invalid

When the text in a container is connected to an IMG, input, textarea, select, object and other elements, the Line-height value set on the container will be invalidated and the row height of the above element may X2.
Affected browsers: Microsoft Internet Explorer 5.01/windows Microsoft Internet Explorer 5.5/windows Microsoft Internet Explorer 6

Workaround:
An IMG, input, textarea, select, object, and other elements that are connected to text are attributes:
{margin: (belongs to line-height-itself img,input,select,object height)/2px 0;vertical-align:middle;}

CSS hack code and browse compatibility summary