¿CSS compatible para IE y FireFox?

Uno de los mayores quebraderos de cabeza de cualquier maquetador o diseñador WEB es la dichosa presentación en pantalla que realizan los distintos navegadores, sobre todo cuando intentamos posicionar de manera absoluta las capas que forman parte de la página.

Resulta que el modo en que calculan el tamaño de las capas los navegadores más extendidos es completamente diferente y ello influye directamente en el aspecto final.

Una posible solución es forzar a FireFox a comportarse como IE, ya que este último realiza el cálculo de un modo más sensato aunque no sea el recomendado por el W3C.

Para ello basta utilizar la siguiente hoja de estilos y la coincidencia entre ambos navegadores será idéntica prácticamente a nivel de píxel.

<style type="text/css">
*{-moz-box-sizing: border-box;box-sizing: border-box} 
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
</style>

También funciona en NetScape y no se si en algun otro navegador.

21 comentarios en «¿CSS compatible para IE y FireFox?»

  1. Veo que ultimamente hablas mucho de temas relacionados con el diseño web, asi que leyendo tu curriculum de nuevo decidí visitar Michael Page.

    Enhorabuena por la web Ric, toda una "profesionalidad" ;-P

    Por cierto, me ha encantado lo de "Confienos una mision", en vez de llamarse Michael Page podia llamarse Michael Knight 😉

    Saludos!

    Responder
  2. Gracias Luther pero no quiero llevarme todo el merito, es un trabajo de mucha gente y en varios países.
    De hecho tampoco participé en la realización de esta ya que esta versión fue realizada en Java y esto lo llevo bastante mal. Yo, solo me ocupaba de llevarla para España y Portugal, y para eso tenía un equipo de 3 personas.
    Una página web de este tamaño requiere mucho trabajo y muchos mimos, y si además la tienes que hacer crecer, tienes que ser muy imaginativo.

    A ver si te mando un foto-montaje que me hicieron los colegas de Michael Page donde salgo con el cuerpo de Michael Knight, no por lo que tu dices sino por el corte de pelo que tenia antes.

    Responder
  3. Realmente no es el posicionamiento lo más sensato, sino el denominado box-sizing, o cálculo del tamaño de las capas y demás elementos.
    Con IE el "width" es el ancho y el "height" el alto (así de fácil), mientras con el modelo del w3c es necesario además del "width" y "height" conocer el "padding" y el "margin" así como el "border-width" para poder calcular el tamaño real en píxeles que ocupará en pantalla el elemento.
    Creo que el modelo más sensato está claro.

    Para saber más:

    http://www.webmasterworld.com/fo...

    Responder
  4. Interesante articulo ademas de bastante util, una solucion muy practica para evitar doble diseño, ya llegara el dia en que los browsers sigan las normativas al pie de la letra, mientras tanto esta es una opcion muy recomendable

    Un saludo

    Responder
  5. He retocado un poco el post de Luis para que se vea todo… De todas formas este post es bastante viejo y hay otras técnicas, quizás un poco más fiables que esta.

    Responder
  6. ok, pero no lo entiendo, tengo un menu horizontal y se me ve perfecto en firefox pero se me hace vertical en IE, ¿cómo uso ese código que citas?? lo siento, no lo entiendo y voy de cabeza con este tema.
    gracias por adelantado si me contestas.

    Responder

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.