Diferencia entre revisiones de «Compatibilidades CSS en Internet Explorer»
| Línea 31: | Línea 31: | ||
} | } | ||
| − | Font-face en IE7+: | + | |
| + | ''' | ||
| + | Font-face en IE7+:''' | ||
@font-face { | @font-face { | ||
Revisión del 19:39 6 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.
