gmail中的HTML时事通讯

Question

我正在编写 html 时事通讯并在 gmail 中遇到了奇怪的事情。代码：

<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 截图：

来自其他电子邮件客户端的屏幕截图：

有什么提示吗？

您的帮助将不胜感激。

Answer 1

关于字体的更改，似乎“其他客户端”可能会显示非 HTML 正文，我认为 gmail 默认支持 HTML。

您是否将内容数据设置为 HTML？ 例如在 c# 中，您可能需要设置：

MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;

Answer 2

这是一个浏览器问题。当您将图像放入表格中时，图像应该是一个内联元素，位于文本行上。这意味着它下面会有空间（对于低于基线的文本行的一部分，即下降部分）并且 GMail 的呈现是“正确的”。

但是，在Quirks mode 以及“几乎标准”模式下，单独在单元格中的图像的行为类似于块而不是内联元素，因此它不会获得额外的间距。看起来“其他”客户端处于 Quirks 模式，因为它已重置表格内的字体大小（典型的 Quirks 模式错误）。

通常您希望不惜一切代价避免 Quirks 模式，因此您将使用标准模式并通过在 @ 上设置 CSS display: block 或 vertical-align:-anything-but-baseline 来解决 img-in-table 问题987654325@ 元素，或者更好的是，转储丑陋的布局表并使用一些背景图像。当然，在电子邮件环境中，您的造型机会受到严格限制。

是的，如果您愿意，可以尝试在图像上设置style="display: block" 以尝试使它们在 Quirks vs Standards 中显示相同，但​​请注意，这是处理 HTML 邮件时遇到的最少问题。您将面临比这更严重的破损。 HTML 电子邮件在各个层面都完全烂透了；如果您有任何机会摆脱它，只需邮寄一个指向正确网页的链接，然后这样做。