CSS - ¿Los márgenes son algo malo?

He notado que algunos navegadores tienen problemas con los márgenes, especialmente cuando se flota un elemento. Por ejemplo, este sitio web que estoy haciendo se ve bien en Firefox, pero parece que IE7 arruina los márgenes por completo. También lo veo en varios navegadores Linux y algunos de ellos cometen errores similares.CSS - ¿Los márgenes son algo malo?

El sitio es http://w3box.com/mat

Esto se ve bien en FF3.0 la medida de lo que puedo decir. Todavía no lo he visto en FF2, o IE6. ¿Por qué sucede esto? ¿Es porque tengo DIV flotantes con márgenes especificados?

¿Hay algunas cosas que debería evitar o debería haber hecho de manera diferente?

Editar: Por lo que parece que mis etiquetas fueron la fuente de la confusión. Había colocado imágenes en el que no estaba definido en el CSS y que tenían flotantes, combinadas con márgenes. Esto arruinó todo y tengo que volver a hacer esto.

Además, algunas cosas sucedieron cuando usé XHTML Strict en su lugar :) ¡Gracias a todos! Trataré de arreglar esto por mi cuenta :)

Fuente

2010-01-25 Kenny Bones

Se ve bien en IE8, si te interesa. – Sapph

Intenta acostumbrarte a desarrollar sitios en 'XHTML 1.0 strict' o' HTML 4.01 strict'. Esto resuelve una gran cantidad de problemas de boxmodel, –

¡Gracias! Ahora el sitio se ve tan mal en FF como IE :) Significa que necesito reposicionar todo pero ¡está bien! Siempre y cuando sea lo mismo en ambos. :) Gracias por el consejo :) –

Margen no están mal, pero IE has some troubles con los márgenes de los elementos flotantes. Si bien hay muchas recetas para corregir, creo que en su caso puede usar posicionamiento absoluto en lugar de float + márgenes (realmente no necesita un comportamiento "flotante" cuando la imagen está envuelta en texto)

Fuente

2010-01-25 09:14:35 Dmitry

Esto es IE7 y el error no ocurre en IE8. Solo lo probé. Todavía no lo he probado en IE6 porque no puedo encontrar un solo servidor de terminal donde todavía esté instalado. Aunque intentaré el posicionamiento absoluto. ¡No hay necesidad de complicar el código más de lo necesario! :) –

Mira, lo es. Realmente no entiendo por qué esto está sucediendo. Quiero decir, el DIV #contentInner ni siquiera tiene un flotador. Y estos son los márgenes duplicados o algo así. ¿Podrían ser las imágenes que coloqué allí? No tienen sus propias clases, pero he especificado el código CSS en la etiqueta . Esta podría ser la explicación? Porque veo el error en el menú del encabezado y #contentInner DIV. Y ambos tienen las etiquetas antes que ellos ... –

Son las etiquetas el problema. IE parece agregar algo de espacio después de las imágenes. Muy parecido a un salto de línea o algo así. El problema se resuelve si elimino las etiquetas . Así que probablemente tendré que buscarlos en su lugar. –

Sugeriría usar alguna forma de CSS Framework (Blueprint CSS, 960 Grid, etc.) ya que tienen un número de margen, relleno y otros restablecimientos de elementos HTML comunes . Debería encontrar el desarrollo de navegador cruzado es más fácil usando un marco.

Fuente

2010-01-25 09:09:44 Kane

Los diferentes navegadores tienen diferentes formas de manejar el modelo de caja. La mayoría de las veces, los sitios que se muestran bien en FF, Chrome o IE8 pueden tener problemas en IE6 y 7. Para solucionar este problema, puede intentar establecer todos los márgenes y rellenos predeterminados en 0 (y ajustarlos según sea necesario en específicos elementos):

* {margin: 0px; relleno: 0px; } // regla más simple ...

Para ver más información sobre CSS restablecer se puede ver en: http://meyerweb.com/eric/tools/css/reset/

y luego aplicar diferentes estilos para Internet Explorer 7 y 6 con los comentarios condicionales.

Fuente

2010-01-25 09:11:10 mamoo

Acabo de probar esto y en realidad no hizo nada. Me gustaría establecer esto en el html y el cuerpo en el CSS de todos modos. Puse el código de restablecimiento CSS aunque :) –

No estoy de acuerdo con usar una biblioteca si quiere aprender sobre CSS, parte de la curva desafortunadamente es aprender sobre las maneras en que los diferentes navegadores reaccionan al CSS. Ni siquiera sugeriría usar una hoja de estilo de reinicio. Si va a hacer esto mucho, aprenda cómo funciona CSS. Si usa una biblioteca o una hoja de estilos establecida que no entiende cómo la arreglará cuando se rompa.

Fuente

2010-01-25 09:16:56 matpol

Como se menciona en otras respuestas, tiene que ver con la interpretación de IE de la caja model.

Cada vez que se flota algo, IE tiende a doblar los márgenes especificados. Esto se puede solucionar con una hoja de estilo adicional para IE usando conditional comments.

Consulte también: http://www.positioniseverything.net/explorer/doubled-margin.html

Fuente

2010-01-25 09:16:56

¿Pero no fue corregido con IE7? Es lo que pensaba. Pero no parece de todos modos. –

IE7 todavía es un poco peculiar con el modelo de caja: arreglaron la mayoría de los errores, pero aún existen algunos –

No hay nada malo con el uso márgenes.

Las versiones antiguas de IE tienen un error y eso por sí solo no es razón suficiente para evitar el uso de una de las funciones de diseño principal de CSS. En concreto, este error se produce en IE cuando flotar un objeto y darle un margen en la misma dirección, por ejemplo .:

.whatever { 
    float: right; 
    margin-right: 5px; 
}

Puede hacer frente a esto un número de maneras, dependiendo de su diseño. Una forma sería agregar otro div alrededor de su cuadro y usar relleno para replicar el mismo espacio que un margen.

Fuente

2010-01-25 09:19:20

Los márgenes y los rellenos no producen el mismo efecto. Ese es todo el punto del modelo de caja. Solo produciría el mismo efecto sin fondo y sin borde. –

Sí, tiene razón en que no producen el mismo efecto, pero si está solucionando un error, puede cambiarlos para proporcionar el mismo espacio entre los objetos. Definitivamente depende de la situación, pero puede ser una opción. –

De acuerdo +1 restablecido - bueno, si editas tu respuesta, puedo eliminarla. :-) –

CSS - ¿Los márgenes son algo malo?

Respuesta

Cuestiones relacionadas