Gmail 中的 Html 时事通讯
我正在编写 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 屏幕截图：
其他电子邮件客户端的屏幕截图：
有任何提示吗？
我们将不胜感激您的帮助。
Im coding html newsletter and faced up with strange thing in gmail. Code:
<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 screenshot:
Screenshot from other email clients:
Any hints?
Your help would be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
关于字体的更改，看起来“其他客户端”可能会显示非 HTML 正文，我认为 gmail 默认支持 HTML。
您是否将内容数据设置为 HTML？
例如，在 c# 中，您可能需要设置：
In regard to the change of fonts, it somewhat seems like the 'other client' might show a non-HTML body and I think gmail supports HTML by default.
Have you set the content-data to be HTML?
For instance in c# you might need to set:
这是浏览器的问题。当您将图像放入表格中时，图像应该是一个内联元素，位于文本行上。这意味着它下面会有空间（对于低于基线的一行文本的部分，即下行部分），并且 GMail 的渲染是“正确的”。
然而，在 Quirks 模式以及“几乎标准”模式下，图像是单独的在单元格中的行为类似于块而不是内联元素，因此它不会获得额外的间距。看起来“其他”客户端处于 Quirks 模式，因为它重置了表格内的字体大小（典型的 Quirks 模式错误）。
通常，您希望不惜一切代价避免 Quirks 模式，因此您可以使用标准模式并通过设置 CSS
display: block或vertical-align:< 来修复 img-in-table 问题/code>-anything-but-baseline 在![]()
所以，是的，如果您愿意，请尝试在图像上设置
style="display: block"，以使它们在 Quirks 与 Standards 中显示相同的内容，但请注意，这是最不重要的问题处理 HTML 邮件。你将面临比这更严重的破损。 HTML 电子邮件在各个层面上都完全糟糕；如果您有机会通过邮寄正确网页的链接来摆脱它，那么就这样做。It's a browser issue. When you put an image inside a table, the image should be an inline element, sitting on a text line. That means there will be space below it (for parts of a line of text that go below the baseline, ie. descenders) and GMail's rendering is ‘correct’.
However, in Quirks mode, as well as “almost standards” mode, an image that is alone in a cell behaves like a block instead of an inline element, so it doesn't get the extra spacing. It looks like the ‘other’ client is in Quirks mode, as it has reset the font size inside the table (a typical Quirks mode bug).
Normally you want to avoid Quirks mode at all costs, so you'd use Standards mode and fix up the img-in-table problem by setting CSS
display: blockorvertical-align:-anything-but-baseline on the<img>elements, or, better, dump the ugly layout-table and use some background images instead. However of course in a e-mail context your opportunities for styling are strictly limited.So yeah, try setting
style="display: block"on the images to try to make them display the same in Quirks vs Standards if you like, but be aware that this is the least of your problems when dealing with HTML mail. You will face much, much worse breakages than that. HTML e-mail completely sucks on every level; if you have any chance to get out of it, by just mailing a link to a proper web page, then do that.