1

我正在编写 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>

邮箱截图：

邮箱

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

在其他电子邮件客户端中

有什么提示吗？

您的帮助将不胜感激。

4

2 回答 2

4

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

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

通常，您希望不惜一切代价避免 Quirks 模式，因此您将使用标准模式并通过在元素上设置 CSSdisplay: block或vertical-align:-anything-but-baseline 来修复 img-in-table 问题<img>，或者更好的是，转储丑陋的布局-table 并改用一些背景图像。然而，当然在电子邮件上下文中，您进行样式设置的机会受到严格限制。

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

于 2010-09-16T19:53:20.953 回答
0

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

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

MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;
于 2010-09-16T19:07:50.717 回答