¿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.

Entradas relacionadas

Puedes dejar un comentario o seguir los comentarios vía RSS .

18 comentarios

  1. Luther Blissett 19 de Septiembre de 2005
    Gravatar

    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!

  2. Richard 19 de Septiembre de 2005
    Gravatar

    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.

  3. Gromka 19 de Septiembre de 2005
    Gravatar

    Necesito ver ese fotomontaje :-D

  4. Gromka 19 de Septiembre de 2005
    Gravatar

    Entrando en el tema… No sé si entiendo muy bien la táctica. Yo es que soy antihacks xD

  5. Luther Blissett 20 de Septiembre de 2005
    Gravatar

    Jajajajaja. Mandamelo que soy fan de Michael ;-P

    Tienes que ser un puntazo luchando contra el mal. Dale recuerdos a Kitt y Devon de mi parte.

  6. manu 31 de Enero de 2006
    Gravatar

    ¿Sensato?

    Quisiera saber por qué se considera más sentato el modo de posicionamiento del IE que el de la W3C.

  7. Luishp 31 de Enero de 2006
    Gravatar

    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...

  8. vinceneil 6 de Mayo de 2006
    Gravatar

    Gracias, al fin me quite un dolor de cabeza de encima, y ahora mi web, cierra bien, pixel a pixel.

  9. Juan DIego 31 de Julio de 2006
    Gravatar

    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

  10. JCaelum 12 de Junio de 2008
    Gravatar

    Lo que no entiendo de tu código es que no cierra con el punto y coma, parece estar incompleto, no sé si podrías aclararme eso.

  11. Richard 13 de Junio de 2008
    Gravatar

    No hace falta poner un “;” en el ultimo atributo.
    Dicho de otra manera, no hace falta poner un “;” antes de un “}”

  12. pepe 26 de Junio de 2008
    Gravatar

    Solo veo

    *{-moz-box-sizing: border-box;box-sizing: border-box} p{margin

    como acaba??

    se pone asi, tal cual en la pagina .html?

  13. JoseQuinta 27 de Junio de 2008
    Gravatar

    Me pasa lo mismo que a otro comentarista. ¿Como acaba?

  14. RicPlan 29 de Junio de 2008
    Gravatar

    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.

  15. javier 21 de Septiembre de 2008
    Gravatar

    Disculpa me interesa este tema donde pongo ese código soy principiante y no c donde ponerlo saludos

  16. Richard 26 de Septiembre de 2008
    Gravatar

    Publicado por javier Disculpa me interesa este tema donde pongo ese código soy principiante y no c donde ponerlo saludos

    Al ser una hoja de estilo la tendrás que poner dentro de la etiqueta head.

    Comment Tags: CSS
  17. Adela 26 de Septiembre de 2008
    Gravatar

    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.

  18. mercedes 6 de Octubre de 2008
    Gravatar

    son orriblesssss,pero tienen su gracia.kierop unooooo,pero xo kiero el k se le escapa el airee,ese pa mi

Deja un comentario

Por favor cuida tu estilo, tu ortografía y se educado. Tu email no será publicado.

Tags:
Separate individual tags by commas