Diferencia entre revisiones de «Compatibilidades CSS en Internet Explorer»

Revisión actual del 14:30 30 ago 2013

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan. Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

Opacity en IE7+:

div{
    opacity: 0.5;
    filter: Alpha(Opacity=50); 
}

Display inline-block en IE7+:

div{ 
    display: inline-block; 
    zoom: 1; 
    *display: inline 
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

Max width y Max height en IE7+:

div{
    max-width: 200px;
    *width: expression(document.body.clientWidth>199?"200px":"auto");.
    max-height: 200px;
    *height: expression(document.body.clientWidth>199?"200px":"auto");
}

Font-face en IE7+:

@font-face {
            font-family: 'NombreFuenteWeb';
            src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente link lo explica con más detenimiento.

Inherit en IE7+:

div {
     color:inherit;
     //color: expression(this.parentNode.currentStyle['color']);
}

De esta forma nuestro elemento puede heredar el color del elemento padre. El atributo a heredar es el que se encuentra dentro de "currentStyle".