1 <!DOCTYPE HTML> 2 <HTML> 3 <Head> 4 <title>Css Hack IE Editions Opera Chrome safari Firefox</title> 5 <MetaCharSet= "Utf-8″/>6 <style> 7 #test8 { 9 width:300px; Ten Height:300px; One A Background-color:Blue; /*Firefox*/ - Background-color:red\9; /*All ie*/ - Background-color:yellow\0; /*IE8*/ the +background-color:Pink; /*IE7*/ - _background-color:Orange; /*IE6*/ - } - : Root #test{Background-color:purple\9; } /*IE9*/ + @media All and (min-width:0px){#test {Background-color:black\0;} } /*Opera*/ - @media screen and (-webkit-min-device-pixel-ratio:0){#test {Background-color:Gray;} } /*Chrome and Safari*/ + @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){ A #test {Background-color:#00ff00!important; } /*Ie10*/ at *::-ms-backdrop, #test{Background-color:#00ffff!important; } /*Ie11*/ - } - </style> - </Head> - <Body> - <DivID= ' Test '>CSS hack test</Div> in </Body> - </HTML>
Because: root weight is large, so ie10 and Ie11 are added!important.
From my Blog
CSS Hack summary includes Ie6-11,chrome,opera,firefox