Diferencia entre revisiones de «Compatibilidades CSS en Internet Explorer»

De Dos Ideas.
Saltar a: navegación, buscar
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 31: Línea 31:
 
  }
 
  }
  
Font-face en IE7+:
+
 
 +
'''Font-face en IE7+:'''
  
 
  @font-face {
 
  @font-face {
Línea 38: Línea 39:
 
  }
 
  }
  
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.
+
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".