Entre las diversas divertido "interpretaciones" que Internet Explorer 6 se puede hacer con HTML / CSS, el de la "doble margen" es sin duda la más tediosa y con frecuencia. En la práctica (escuchar, oír ...) Bueno el navegador de Microsoft se puede - misteriosamente - para duplicar los márgenes de los artículos que se ponen a flotar! : Como tal, el siguiente CSS aplicado a un div con el id de box :
1 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left } div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left} |
Que se obtiene:
Donde n es el margen izquierdo de nuestro 100px! si trova a diretto contatto con il suo contenitore. Este defecto, por fortuna, se produce sólo en determinadas circunstancias, es decir, cuando el margen coincide con la dirección de la float y cuando nuestro div#box está en contacto directo con su contenedor. precedente. Esto significa que otros div#box en la misma línea no sufre por el problema está a la izquierda, pero no el contenedor div#box arriba. Obviamente, el problema no es específico de la margen izquierda, pero especular revertir todo esto tendría el mismo problema con el margen derecho!
Solución
La solución es muy simple: basta con insertar la declaración de display:inline en la CSS, y desaparece el defecto:
1 2 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left ; div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left; inline } display: inline} |
La introducción de display:inline será ignorado por el resto de navegadores, y no porque somos especialmente afortunados, sino más bien específicas del W3C :
... El 'display' es ignorada, a menos que tenga la palabra «nada» el valor.
Yo no entendía una cosa:
en la definición de clase debe estar presente tanto en el display: block de display: inline. ?
dejando sólo el segundo tiene el mismo defecto?
gracias
@ Mauricio:
El
display:blockse puede reemplazar condisplay:inlineRecuerdo que fue uno de los errores primero que me encontré con IE6.
)
Al menos en este caso la solución es por lo menos de inmediato (siempre que usted sabe
[...] Simplemente, se explica cómo eliminar el problema del doble margen en IE6, la pesadilla de la web [...]
¿Es usted un grande, que haría un monumento! Claro, sencillo y rápido! Gran post
Usted es un gran! funciona muy bien. Ahora mis botones sólo se ven una vez. El comando "display: inline" se dirige a un gran número de problemas en IE.