pon css en tu vida!

css, html, javascript, php y mucho mas…

Con el lanzamiento de Internet Explorer 8, los maquetadores web nos encontramos ante un nuevo reto en nuestro trabajo diario, un nuevo navegador de Microsoft que, por suerte o por desgracia, poco o nada tiene que ver con sus antecesores.

Para los próximos desarrollos la estrategia a seguir está clara, asegurar nuestras maquetas en IE 7  y 8. Pero, ¿qué pasa con nuestros proyectos que ya están en producción? ¿Partimos desde cero para crear una hoja de estilos que funcione correctamente en IE 8?

La compañia de Redmond nos ha tenido en cuenta (aunque sea por primera vez) a nosotros, sufridos maquetadores y se ha sacado de la manga una nueva meta etiqueta, concretamente esta:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Con esta simple linea, forzaremos al motor de IE 8 a renderizar como lo hace  IE 7, haciendo las mismas barbaridades que su predecesor e incumpliendo exactamente los mismos estándares. Lo que hará que todas aquellas webs maquetadas a la perfección en IE 7, se vean exactamente igual en la nuva versión del navegador de Microsoft.

Su funcionamiento es muy simple. Tan solo debemos añadir la meta etiqueta en la cabecera del HTML, pero ojo, la etiqueta deberá estar obligatoriamente justo después de la apertura de la cabecera (<head>). Si la situamos en cualquier otro sitio del documento, no funcionará.

Veamos un ejemplo de donde insertarla utilizando el html de este blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>X-UA-Compatible. Meta etiqueta para Internet Explorer 8 | pon css en tu vida!</title>

Modificando una sola línea de nuestros antiguos proyectos, conseguiremos que el nuevo Internet Explorer 8 muestre correctamente el fruto de nuestras horas de maquetación para ese suplicio llamado IE7.

¿Y tú? ¿Conocías y/o utilizas ya la etiqueta X-UA-Compatible para Explorer?

Fuente: Netadictos

10 Comentarios

  1. Enrique Hernández González el 21.08.09, 17:44

    Hola, yo me dedico al desarrollo de sistemas, ya tiene algo de tiempo que estoy desarrollando para web, con VS, que raro que siendo de la misma empresa no tenga nada para solucionar o facilitar el diseño, probe el meta que indicas pero no funciona o a lo mejor no es compatible con Masterpage, que es la forma en la que se esta desarrollando este sistema, de todas maneras gracias por tu ayuda, saludos!

  2. Enrique Hernández González el 21.08.09, 18:12

    Hola otra vez, checando las referencias en esta página encontre otros datos importantes, como te decia yo estoy desarrollando para VS y en mi máuqina tengo instalado el ii7, así que para que funcine es necesario meter en el win.config las siguientes lines:

    -Por web.config si usamos IIS 7:

    muy seguramente ya tienen el , asi que solamente tienen que meter las lineas de codigo que hacen falta, saludos y muchas gracias!

  3. Joan el 28.08.09, 12:47

    @Enrique, me alegro de que te haya servido…

    El único caso en el que esta metaetiqueta no me ha dado resultados ha sido en un Sharepoint, corriendo bajo ISS en un Windows 2003 Server.
    No tengo ni idea del porqué, pero más que arreglar la maquetación, la rompía. Sin embargo, quitándola se veía correctamente.

    Microsoft y sus misterios…

  4. davey el 17.09.09, 18:30

    me sirvió el tema que tiene que estar al principio justo debajo de HEAD, porque en otros lados había leido que solo habia que insertarlo y nada mas.

    Muy buena la aclaración.

    Gracias!

  5. Joan el 17.09.09, 22:48

    @davey llevas razón… cuando me pasaron el enlace e hice las primeras pruebas, no lograba hacerlo funcionar. Después, a base de pruebas logré dar con el “kit” de la cuestión… o lo pones justo debajo del head,o no hay forma.

  6. evelyn trullen el 04.10.09, 05:21

    amigo eres un capo! felicitaciones me ayudaste mucho. busquepor todos lados y con tu ayuda di en el clavo.

    excelente ayuda!
    grcias

  7. Talina el 20.10.09, 20:39

    Hola, muchas gracias por la aportación que nos has dado, en lo particular me ayudo a resolver el problema ya que en IE8, mi sitio no se veía bien. Saludos.

  8. Pablo Marmol el 22.10.09, 20:12

    Gracias Capo!! En todos lados hablan de ese maldito meta pero nadie decía donde ponerlo.

  9. Joel el 06.01.10, 00:19

    Muy bueno el articulo, muchas felicidades y exitos. esta muy chula la pagina.

  10. Carlos Magallon el 09.01.10, 21:04

    Gracias, funcionó muy bien.

Deja tu comentario