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
Acceder