only - ¿Cómo definir reglas CSS específicas para IE9 solo?

hack css para ie11

Question

Amigos, ¿pueden ayudarme a definir una regla css específica para IE9? Por ejemplo como este

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }

Answer 1

Creo que puedes hacer lo mismo que si quisieras escribir un código específico para IE6 pero decir IE9 en su lugar :)

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->

Answer 2

Descubrí que, en algunos casos, se usan valores negativos (cuando se usa un compilador para compilar archivos LESS) con:

margin-right: -15px/9; /* This fails */
margin-right: ~"-18px/9"; /* This passes */

Answer 3

No deberías tener que apuntar a IE9. Es capaz de manejar css modernos y no debe ser hackeado. Este es un método obsoleto de desarrollo.

Answer 4

Puedes anteponer el estilo CSS con

:root

Para hacerlo específico de IE9, así:

:root #element { color:pink /0/IE9; }  /* IE9 */

Answer 5

Tenga en cuenta que la respuesta aceptada también apunta a IE10. Como tal, para una lista más completa:

IE 6

* html .ie6 {property:value;}

o

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

o

*:first-child+html .ie7 {property:value;}

IE 6 y 7

@media screen/9 {
    .ie67 {property:value;}
}

o

.ie67 { *property:value;}

o

.ie67 { #property:value;}

IE 6, 7 y 8

@media /0screen/,screen/9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

o

@media /0screen {
    .ie8 {property:value;}
}

Solo en el modo de estándares de IE 8

.ie8 { property /*/**/: value/9 }

IE 8,9 y 10

@media screen/0 {
    .ie8910 {property:value;}
}

Sólo IE 9

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 y superior

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 y 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

Sólo IE 10

_:-ms-lang(x), .ie10 { property:value/9; }

IE 10 y superior

_:-ms-lang(x), .ie10up { property:value; }

o

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (y superior ..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Alternativas de Javascript

Modernizr

Modernizr se ejecuta rápidamente en la carga de la página para detectar características; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html

Selección de agente de usuario

El Javascript:

var b = document.documentElement;
        b.setAttribute(''data-useragent'',  navigator.userAgent);
        b.setAttribute(''data-platform'', navigator.platform );
        b.className += ((!!(''ontouchstart'' in window) || !!(''onmsgesturechange'' in window))?'' touch'':'''');

Agrega (por ejemplo) lo siguiente al elemento html :

data-useragent=''Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)''
data-platform=''Win32''

Permitiendo selectores de CSS muy específicos, por ejemplo:

html[data-useragent*=''Chrome/13.0''] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Nota

Si es posible, evite la orientación del navegador. Identifique y solucione cualquier problema (s) que identifique. Apoyar la mejora progresiva y la degradación agraciada . Teniendo esto en cuenta, este es un escenario de "mundo ideal" que no siempre se puede obtener en un entorno de producción, como tal; lo anterior debería ayudar a proporcionar algunas buenas opciones.

Atribución / Lectura Esencial

• Keith Clarke
• Paul irlandés
• Web devoto
• La llave inglesa

Answer 6

Usa comentarios condicionales de IE :

<!--[if ie 9]>
    your stuff here
<![endif]-->

Answer 7

/ 9 es un "pirateo de CSS" específico de Internet Explorer.

Esto simplemente significa que la única línea específica de CSS que termina con / 9;

En tu ejemplo, si tu CSS tuviera este aspecto ...

html .twit-post .delete_note a 
{ 
background-position-y: 2px/9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px/9;
 }

El resultado sería background-position-y: -14px; en IE 9

Answer 8

use CSS condicional: (coloque el código sobre el <head> en su html, e IE9 leerá ese archivo CSS adicional)

<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

Esto significa que el enfoque es con un nuevo archivo CSS en lugar de un truco en las clases, esto garantiza que los CSS son válidos.