Diferencia entre revisiones de «Compatibilidades CSS en Internet Explorer»

De Dos Ideas.
Saltar a: navegación, buscar
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 19: Línea 19:
 
  }
 
  }
  
−
El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 9.  
+
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 30: Línea 30:
 
     *height: expression(document.body.clientWidth>199?"200px":"auto");
 
     *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".

Obtenido de «https://dosideas.com/wiki/index.php?title=Compatibilidades_CSS_en_Internet_Explorer&oldid=6911»