2011-07-15 13 views
27

Este es un problema aparentemente conocido al enviar correos electrónicos a los usuarios de Google: Google cambia cualquier declaración de "altura" a "altura mínima". Esto significa que las imágenes que se apilan ya no se "tocan" entre sí sin un espacio.Email del suscriptor: GMail está convirtiendo la altura a la altura mínima

¿Alguien sabe de un buen trabajo?

He aquí un ejemplo:

<div style="height:244px"> 
    <img src="http://www.domain.com/images/top.gif" alt="" /> 
</div> 
<div style="height:266px"> 
    <img src="http://www.domain.com/images/bottom.gif" alt="" /> 
</div> 

aparece como la siguiente en Gmail:

<div style="min-height:244px"> 
    <img src="http://www.domain.com/images/top.gif" alt="" /> 
</div> 
<div style="min-height:266px"> 
    <img src="http://www.domain.com/images/bottom.gif" alt="" /> 
</div> 

Así que en lugar de esto:

enter image description here

dos imágenes apilados unos sobre otros mirada así en GMail:

enter image description here

Debe haber una solución simple?

+0

posible duplicado de [Espaciado no deseado por debajo de las imágenes en XHTML 1.0 Strict] (http://stackoverflow.com/questions/948145/unwanted-spacing-below-images-in-xhtml-1-0-strict) – mercator

Respuesta

18

Agregue vertical-align: top, display: block o float: left en la imagen.

De forma predeterminada, las imágenes son bloques en línea y están alineadas con baseline of text. Esto significa que si pusiera cualquier texto junto a ellos, la parte inferior de la imagen se alinea con la parte inferior de la "x", no debajo de la "y". El "espacio reservado" para este descendiente es lo que está causando el espacio entre sus imágenes.

Cualquiera de las declaraciones de propiedad que mencioné anteriormente impedirá que la imagen se alinee con la línea de base de texto, todo de diferentes maneras.

+0

¡Maravilloso! Gracias por esto. Tienes razón, funcionó perfectamente. –

+0

True life saver. – brezanac

+0

Genio! Muchas gracias;) –

8

Noté que GMail no interfiere con la configuración de un atributo <td height="...">. Así que eso podría ser una alternativa si puedes asignar fácilmente el elemento problemático a una tabla.

+0

En realidad, eso no hace ninguna diferencia en un navegador como Firefox. Aún necesita cambiar la alineación de la imagen de alguna manera. –

32

Acabo de toparme con este problema y lo solucioné configurando max-height con el que no se mezcla.

+1

Si configura tanto la altura como la altura máxima, se eliminará la altura máxima y la altura se cambiará a la altura mínima – Michael

+0

Esta solución funcionó para mí. La altura se sigue convirtiendo en altura mínima, pero ahora se cumple la altura máxima. –

+0

salvavidas! Establecí tanto min-height como max-height igual al mismo valor. Funcionó para mí – roopunk

2

¡Intenta usar la altura de línea en su lugar!

0

que tenían etiquetas DIV que estaba forzando a ser display: table-cell

resolví esto añadiendo una imagen de espaciador de ancho de 1 píxel en la "celda" con un atributo de altura (no estilo CSS) establece en el altura que quería que fuera la celda. Esto no es ideal, pero hizo el trabajo y es un cliente de navegador cruzado/correo electrónico.

Cuestiones relacionadas