Pregunta

Im codificación de noticias html y enfrentado con la extraña cosa en Gmail. Código:

<table cellpadding="0" cellspacing="0" width="700" height="122">
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"></td>
                </tr>
                <tr>                    
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"></td>
                    <td valign="top" height="106" width="689">
                        some content
                    </td>
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"></td>
                </tr>
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"></td>
                </tr>
            </table>

Gmail captura de pantalla:

gmail

Captura de otros clientes de correo electrónico:

En otros clientes de correo electrónico

¿Alguna pista?

Su ayuda será apreciada.

¿Fue útil?

Solución

Es un problema del navegador. Cuando se pone una imagen dentro de una tabla, la imagen debe es un elemento en línea, sentado en una línea de texto. Eso significa que habrá espacio por debajo de ella (para partes de una línea de texto que vaya por debajo de la línea de base, es decir. Descendentes) y la representación de Gmail es ‘correcta’.

Sin embargo, en Peculiaridades modo , así como “casi estándar” modo, una imagen esto es solo en una célula se comporta como un bloque en lugar de un elemento en línea, por lo que no consigue el espacio extra. Parece que el ‘otro’ cliente está en modo no estándar, ya que tiene reajustar el tamaño de la fuente dentro de la tabla (un modo típico error Peculiaridades).

Normalmente se quiere evitar peculiaridades modo a toda costa, por lo que tendría que utilizar el modo de Estándares y solucionar el problema img-en-tabla asignando display: block CSS o vertical-align:-nada-pero-línea de base en los elementos <img>, o, mejor, volcar el esquema de la tabla feo y el uso de algunas imágenes de fondo en su lugar. Sin embargo, por supuesto, en un contexto de e-mail sus oportunidades para el peinado están estrictamente limitados.

Así que sí, intente establecer style="display: block" en las imágenes para tratar de hacer que se muestran en el mismo Peculiaridades vs Normas si se quiere, pero tenga en cuenta que este es el menor de sus problemas cuando se trata de correo HTML. Que se enfrentará a mucho, mucho peores roturas que eso. Correo electrónico HTML chupa por completo en todos los niveles; si tiene alguna posibilidad de salir de ella, con sólo enviar un enlace a una página web adecuada, a continuación, hacer eso.

Otros consejos

En lo que se refiere al cambio de fuentes, algo que parece que el "otro cliente podría mostrar un cuerpo que no sea HTML y creo soportes Gmail HTML por defecto.

¿Ha establecido el Content-datos para ser HTML? Por ejemplo, en C # es posible que necesite conjunto:

MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top