CSS => Hacks de Internet Explorer

Observaciones

Estos "hacks" pueden usarse para apuntar a un navegador / cliente específico. Esto se puede usar para solucionar las diferencias de representación del navegador mediante la aplicación de estilos en uno de los envoltorios mencionados anteriormente.

Modo de alto contraste en Internet Explorer 10 y superior

En Internet Explorer 10+ y Edge, Microsoft proporciona el selector de medios de -ms-high-contrast para exponer la configuración de "Alto contraste" desde el navegador, lo que permite al programador ajustar los estilos de su sitio en consecuencia.

El -ms-high-contrast tiene 3 estados: active , black-on-white y white-on-black . En IE10 + también tenía un estado none , pero eso ya no es compatible con Edge en el futuro.

Ejemplos

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      background: #fff;
      color: #000;
   }
}

Esto cambiará el fondo del encabezado a blanco y el color del texto a negro cuando el modo de alto contraste esté activo y esté en black-on-white modo black-on-white .

@media screen and (-ms-high-contrast: white-on-black) {
   .header{
      background: #000;
      color: #fff;
   }
}

Similar al primer ejemplo, pero esto selecciona específicamente el estado white-on-black solamente, e invierte los colores del encabezado a un fondo negro con texto blanco.

Más información:

Documentación de Microsoft en -ms-high-contrast

Sólo Internet Explorer 6 e Internet Explorer 7

Para apuntar a Internet Explorer 6 e Internet Explorer 7, inicie sus propiedades con * :

.hide-on-ie6-and-ie7 {
    *display : none; // This line is processed only on IE6 and IE7
}

Los prefijos no alfanuméricos (que no sean guiones y guiones bajos) se ignoran en IE6 e IE7, por lo que este truco funciona para cualquier par de property: value prefijo.

Sólo Internet Explorer 8

Para apuntar a Internet Explorer 8, envuelva sus selectores dentro de la @media \0 screen { } :

@media \0 screen {
    .hide-on-ie8 {
        display : none;
    }
}

Todo entre la @media \0 screen { } es procesado solo por I

Adición de soporte de bloque en línea a IE6 y IE7

display: inline-block;

Internet Explorer 6 y 7 no admiten la propiedad de display con el valor de inline-block . Una solución alternativa para esto es:

zoom: 1;
*display: inline;

La propiedad de zoom activa la característica hasLayout de los elementos, y está disponible solo en Internet Explorer. La *display se asegura de que la propiedad no válida se ejecute solo en los navegadores afectados. Otros navegadores simplemente ignorarán la regla.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Hacks de Internet Explorer

Buscar..