Diferencia entre revisiones de «Compatibilidades CSS en Internet Explorer»
(Página creada con 'Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoria de navegadores para IE7 e IE8 no funcionan. Este post es una recopilación de sol…') |
|||
| (No se muestran 6 ediciones intermedias del mismo usuario) | |||
| Línea 1: | Línea 1: | ||
| − | Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la | + | 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 | + | 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+: | '''Opacity en IE7+: | ||
| Línea 6: | Línea 6: | ||
div{ | div{ | ||
| − | + | opacity: 0.5; | |
| − | + | filter: Alpha(Opacity=50); | |
} | } | ||
| Línea 14: | Línea 14: | ||
div{ | div{ | ||
| − | + | display: inline-block; | |
| − | + | zoom: 1; | |
| − | + | *display: inline | |
} | } | ||
| − | El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión | + | 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. |
| Línea 25: | Línea 25: | ||
div{ | 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 [http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 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". | ||
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".
