css - respeta - IE6 relleno adicional en la parte inferior

internet explorer 11 hack css

Question

Tengo una etiqueta div diseñada a través de CSS. Configuré el relleno en 10px (relleno: 10px), funciona igual que lo que quería en Firefox e IE7, pero en IE6 agrega relleno adicional en la parte inferior (aproximadamente 2-3px, creo). ¿Alguien tiene idea de lo que está pasando aquí?

[actualizar]

Me di cuenta de esto, la etiqueta div de la que estoy hablando tiene una imagen de fondo. Cuando eliminé la imagen de fondo, desaparece el relleno adicional en la parte inferior. ¿Algunas ideas?

[otra actualización, ejemplo de código]

Aquí está el CSS aplicado a mi etiqueta div:

.user-info{
    margin-top: 20px;
    margin-right: 20px;
    padding: 10px;
    background-image: url("../img/user_panel_bg.png");
    float:right;
    border: 1px #AAAAAA solid;
    font-size:12px;
}

Answer 1

Recomiendo echar un vistazo al sitio positioniseverything.net y su cobertura de problemas de IE y soluciones temporales. Eche un vistazo a la sección de hack holly, creo que encontrará la respuesta allí.

[edit - added] echa un vistazo aquí para ver el problema, la explicación y la corrección de 3px

Para la configuración del cuadro y la diferencia del navegador, el artículo del modelo de cuadro de puntos ofrece también una buena idea.

Answer 2

¿Has intentado ocultar tu desbordamiento de DIV ? overflow:hidden;

Editar: También puedes intentar display: inline; si estás hablando de empujar horizontalmente

Answer 3

También puede ver algo así como una hoja de estilo de restablecimiento de CSS que le permitirá configurar valores predeterminados que deberían ser razonablemente consistentes en todos los navegadores.

Answer 4

¿Hay una imagen en tu div? Si hay una imagen, hay un error en IE 6 que puede causar un espacio en blanco dentro del div para crear un relleno adicional en la parte inferior

El relleno adicional aparece con

<div>
<img src="myimage.jpg">
</div>

El relleno adicional no aparece cuando cambia su HTML a

<div><img src="myimage.jpg"></div>

Answer 5

potencialmente propiedades de ''margen'' o ''borde''?

Answer 6

Asegúrese de que el tamaño de la fuente no esté creando el problema. Incluso sin texto dentro de un elemento contenedor (por ejemplo, una tapa inferior en un contenedor estirable), IE6 aún dimensionará la altura del cuadro no más pequeño que el tamaño de la fuente (incluso con un conjunto de altura explícito).

Entonces, por ejemplo, si tienes el HTML:

<div class="box">  
  <h1>Heading</h1>  
  <p>This is the main content.</p>  
  <div class="bottom"></div>  
</div>

... necesitarás este CSS:

<style type="text/css">
  .box {
    background: url(bg-middle.jpg) repeat-y;
  }
  .box h1 {
    background: url(bg-top.jpg) no-repeat;
  }
  .box .bottom {
    background: url(bg-image.jpg) no-repeat;  /* bottom cap image */
    height: 10px;                             /* height of your bg image */
    font-size: 1px;                           /* for IE6 */
  }
</style>