Gmail 中的 HTML 电子邮件 - 表格内容出现在单元格之外答案

【问题标题】：HTML email in Gmail - table contents appear outside the cellGmail 中的 HTML 电子邮件 - 表格内容出现在单元格之外
【发布时间】：2012-01-03 19:37:21
【问题描述】：

我为客户创建了一份电子邮件通讯，并且在测试页面时在我的浏览器中正确显示内容，在打开电子邮件时在 Hotmail 中正确显示内容。但是，Gmail 始终不正确地显示页面。我有一个两列布局，左列就好了。然而，右栏不包含内容 - 它们被放置在单元格的右侧（如使用 Chrome 的开发人员工具所示）。无论内容是什么，都会发生这种情况。我尝试通过 Firefox 在 Gmail 中查看它，但仍然出现错误。我被难住了。

我阅读了这两页试图获得一些帮助，但没有一个能说明为什么单元格的内容会显示在单元格之外。这是带有 Lorem Ipsum 的列未正确显示。它应该是这样的：http://www.murraysampson.net/michele/newsletter.html 并且显示不正确： http://cl.ly/2e3D0z3A432g3r1x1a31

这是我的桌子：

<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin">
  <tr>
 <td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td>
</tr>
<tr>
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td>
</tr>
<tr>
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td>
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span>
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td>
</tr>
</table>

【问题讨论】：

标签： html email gmail

【解决方案1】：

即使在添加了“display:block”之后我也遇到了这个问题，我是这样解决的：

如果单元格的内容对于列宽来说太大，它们会导致它们放大。我的大部分文本都偏大，所以我认为我添加到空表格单元格的不间断空格可能是问题所在。我在表格中添加了一个“font-size:9px”属性，这样不间断的空格会更小。这解决了问题。

【讨论】：

【解决方案2】：

这个问题是asked before。

这是来自mahalie的问题的答案：

您的问题的具体答案是 Gmail 增加了额外的空间仅包含图像的表格单元格。要修复此添加 style="display:block" 这些图片。

Campaign Monitor 是一个很好的资源，Mailchimp.com 也是如此。两个都提供一些指南、模板示例等。

【讨论】：