Micaela 11 de Julio de 2009 a las 09.06
   Imprimir artículo
elWebmaster.com

HTML y hacks de CSS para Internet Explorer


internet_explorer_logoUn tema que suele resultar un tanto engorroso a la hora de la programaci√≥n web es la maquetaci√≥n CSS mediante el uso de “cajas” debido a la interpretaci√≥n de la medida de √©stas por los diferentes navegadores.

Si lo que deseas es utilizar definiciones de estilos para versiones específicas de IE, en esta nota les compartiremos la mejor manera de realizar un Box Model Hack para potenciar la compatibilidad de tu sitio.

Comentarios condicionales

Internet Explorer ha tenido por un largo tiempo una propiedad llamada Conditional Comments (comentarios condicionales) que permite que el contenido sea sólo visible para IE. La utilización de los comentarios condicionales en lugar de otros hacks css es simple:

¬Ľ Crea una hoja de estilos com√ļn para todos los navegadores, sin utilizar ning√ļn hack para poder evitar los problemas en IE.
¬Ľ Crea una hoja de estilos com√ļn para todas las versiones de IE.
¬Ľ Crea una hoja de estilos separada para cada una de las versiones de IE que desees etiquetar.
¬Ľ Incuilr las hojas de estilo del punto 2 y 3 utilizando un comentario condicional.

Sintaxis condicional de comentario

El comentario condicional es sólo un comentario HTML especialmente formateado que es captado sólo por varias versiones de Internet Explorer para Windows.

El siguiente comentario condicional es captado por IE5, IE5.5 e IE6:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie.css” />
<![endif]–>

Si no deseas que tus estilos espec√≠ficos de IE sean superpuestos por tu hoja de estilos regular, el orden de la fuente es significante; desear√°s especificar la hoja de estilos com√ļn primero, con las versiones espec√≠ficas de IE siguiendo a continuaci√≥n:

<link rel=”stylesheet” type=”text/css” href=”common.css” />

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie.css” />
<![endif]–>

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie-6.0.css” />
<![endif]–>

<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie-5.0+5.5.css” />
<![endif]–>

Comentario Condicional en CSS

{/* any IE */float: expression(’none’);/* IE 5.x */}
{/* any Moz */float: expression(’none’);/* Moz 2.x */}

Fuente: Tutorial Feed


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. dfzfds dice:

    Ejemplo 12

    Imágenes

    Un texto cualquiera.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión