html - only - Dirígete a IE9 solo a través de CSS
internet explorer 11 hack css (5)
Como se señala en algunos de los comentarios, hay ocasiones en que el HTML condicional no funcionará para una situación específica, especialmente si no puede modificar el código de la página. Así que aquí hay una solución:
Estilo base
.test{color:red;}
Anulaciones específicas del navegador
IE <8: html >/**/body .test { color: green; } html >/**/body .test { color: green; }
IE 9:: :root .test{color:green / ;}
IE 8 y 9: .test{color:green / ;}
IE 9 y Opera :root .test {color: green/0;}
Notas
Lo anterior no funcionará para background o font-* , y cualquier /0 o /9 hacks generalmente son inestables. Para obtener una lista completa de los hacks de CSS, consulte http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt .
Solo me preguntaba si estos hacks de IE estaban en mi bolsa de trucos
"/9" - for IE8 and below.
"*" - for IE7 and below.
"_" - for IE6.
es decir, como
body {
border:2px solid blue;
border:2px solid yellow /9;
*border:2px solid green;
_border:2px solid orange;
}
Si alguien tiene un truco para IE9? es decir, estoy tratando de apuntar a IE9 solo a través de CSS?
En esta dirección: http://www.impressivewebs.com/ie10-css-hacks/ Encontré una consulta de medios específica para IE10 solamente (y abajo):
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
IE9 es bastante compatible con los estándares. No deberías necesitar hackearlo.
Además, debe usar los comentarios condicionales de IE para cargar diferentes estilos. Para IE 9, harías:
<!--[if IE 9]>
<!-- conditional content goes here -->
<![endif]-->
Sugiero usar condcoms para alimentar un archivo css IE9 o tener una clase html condicional, similar a:
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
Terrible, pero debería funcionar:
body {
border:2px solid blue;
border:2px solid yellow /9;
*border:2px solid green;
_border:2px solid orange;
}
body:nth-child(n) {border:1px solid purple /9; /*Should target IE9 only - not fully tested.*/}