GMail forzando TD que contiene spacer.gif para ser 16px alto

Question

Así que acabo de perder varias horas de mi vida tratando de ganar esta batalla, sin suerte. En resumen, estoy tratando de llenar una tabla con tres imágenes de 10px, pero GMail está forzando a que cada celda sea 16px. Esto es lo que estoy trabajando con:

<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important"> 
    <tr style="height:10px" height="10"> 
    <td width="10" height="10" style="height:10px !important"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td> 
    <td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td> 
    <td width="9" height="10" style="height:10px !important"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td> 
    </tr> 
</table> 

Mis disculpas que hay tantos atributos redundantes, porque he estado tratando todo. Básicamente, estoy tratando de hacer que la mesa tenga exactamente 10px de altura. Sin importar qué, sin embargo, GMail lo hace 16px de alto. Si utilizo herramientas de desarrollador para eliminar las tres imágenes directamente del código fuente, la tabla colapsa a 10px. Además, si borro 2 de las tres imágenes, aún permanece 16px. Es casi como si el TD debe ser 16px si contiene una imagen, o la imagen tiene 3px de relleno a su alrededor.

¿Alguien ha experimentado algo como esto? Y si es así, ¿alguna idea? Me estoy quedando sin ideas, y la cordura ..

Answer 1

Como dijo Herbie, asegúrese de establecer la altura de la línea en el TD.

También asegúrese de tener un conjunto de tamaño de fuente, porque gmail puede establecer la altura mínima del TD en función de un carácter de espacio en esa celda. En general, establecer una fuente de 1px en celdas donde no hay texto es una buena práctica.

Parece que esto es para la creación de correo electrónico html, ¿correcto? Eche un vistazo a esto para cualquier otro problema - me ha ayudado un montón de veces http://www.emailology.org/#1 y http://www.campaignmonitor.com/resources/ para obtener consejos.

Answer 2

que no puedo comentar, sin embargo, así que voy a publicar como una respuesta ...

16px suena como un valor line-height. ¿Ha intentado establecer la altura de línea de cada TD en 10px o cambiando cada IMG de línea a bloque en línea?

Answer 3

Estaba tratando de encontrar su solución.

Ésta es la solución literal, ponga esto en su etiqueta TD:

style="line-height:0" 

Answer 4

En su etiqueta <img>, se puede poner esto:

style="display:block;" 

... o puede hacer que la altura a max-height. debería resolver tu problema.

Answer 5

en HTML - <img> etiqueta no es una etiqueta de bloque por lo que tenemos que utilizar CSS siguiente para que funcione como una etiqueta de bloque

style="display:block;" 

con este CSS la su altura dada perfectamente trabajar en su página HTML .

¡Pruébalo una vez!