Lenguajes
Web/Otros
Extra
Enlaces

Comentarios condicionales para IE

Todos nos hemos encontrado alguna vez, (más de una desgraciadamente), con que nuestro amigo IE, nos ha jugado una mala pasada. Sobre todo si hablamos de diseño web con estándares, como se promueve en este blog. El caso es que como bien sabemos todos, IE interpreta o se salta los estándares como le place, y alguna herramienta tendríamos que tener para protegernos de él, ¿no?. Como su propio nombre nos indica, no son más que comentarios incrustados en nuestro head, que harán que si nuestro navegador es IE, (espero que no), lea un estilo específico, ya sea en la misma cabecera, dentro del comentario, o importando una hoja de estilo específica para IE. Estilo en la cabecera

Para incrustar nuestro estilo conjuntamente con el comentario, implementamos el siguiente marcado dentro de nuestra cabecera:

<!--[if IE]>
<style>
div.logo {
   margin-left: 10px;
}
</style>
<![endif]-->

También podemos ser más concretos, y especificar la versión de IE que necesitamos que lleve un estilo diferente:

<!--[if IE]>
Comentario para Internet Explorer
<![endif]-->
<!--[if IE 5]>
Comentario para Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
Comentario para Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
Comentario para Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
Comentario para Internet Explorer 6
<![endif]-->
<!--[if gte IE 5]>
Comentario para Internet Explorer 5 y superior
<![endif]-->
<!--[if lt IE 6]>
Comentario para Internet Explorer inferior a 6
<![endif]-->
<!--[if lte IE 5.5]>
Comentario para Internet Explorer inferior o igual a 5.5
<![endif]-->

Importando una hoja de estilo externa

Pongamos como ejemplo que vamos a necesitar importar una hoja de estilo exclusiva para IE. Veamos nuestra cabecera:

<!--[if IE]>
<style type="text/css" media="screen">
@import url(css/ie.css);
</style>
<![endif]-->

Listo. Con este sencillo método, ya podemos especificar nuestro estilo, para este navegador tan particular y caprichoso


Redactado por Ervdesign
http://ervdesign.net/blog/?p=26

Inicio | JavaScript necesario para este enlace

Noticias en RSS2 XHTML Vlido CSS Vlido