Gmail 显示图像之间的间隙答案

【问题标题】：Gmail displaying gaps between imagesGmail 显示图像之间的间隙
【发布时间】：2015-07-21 03:13:36
【问题描述】：

为客户构建一个过于花哨的 HTML 邮件。代码通过直接输入在http://validator.w3.org 验证为 XHTML 1.0 过渡。问题是 Gmail 会在每张图片之间显示间隙。

每个图像及其锚点都有内联样式，将内边距和边距设置为零。锚标记和封闭的图像标记之间或后续锚标记之间没有空格。代码中没有换行符。

这里是直接从收到的电子邮件中粘贴出来的：

<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&amp;sessionlanguage=&amp;menu_id=007F7A77-97DB-4601-9691-CB7AA4ED7950" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Buy Tickets" border="0" height="55" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_buy_tickets.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Three Stages Presents" border="0" height="182" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_presents.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Partners of Three Stages" border="0" height="181" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_partners.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Productions of Three Stages" border="0" height="176" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_productions.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/" shape="rect"><img alt="The national tour of &quot;A Chorus Line&quot;--opening at Three Stages 2/11--receives a rave review in Ventura. " border="0" height="134" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpg" width="180"></a><a href="http://www.nytimes.com/2011/01/13/books/13book.html?_r=2" shape="rect"><img alt="Mr. Rosanne Cashâ€™s new memoir" border="0" height="44" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_2.jpg" width="180"></a><a href="http://www.archive.org/details/Insight_080403_a" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ's &quot;Insight&quot; (He's the second guest on the show). Originally recorded April, 2008." border="0" height="68" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpg" width="180"></a><a href="http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 " shape="rect"><img alt="Twenty years after his own accident, Kevin Spencer, of Spencers Theatre of Illusion teaches magic to kidsâ€”as therapy. " border="0" height="81" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_4.jpg" width="180"></a><a href="http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Follow us on Facebook" border="0" height="92" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a>

这是完整的文档。 https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html 这是 Gmail 显示空白的左侧列。

有什么建议吗？

【问题讨论】：

也许我只是累了，但为什么是'shape="rect"'呢？（甚至不提供坐标，因此将其全部留给用户代理）
该 shape='rect' 由 CKeditor 添加，电子邮件正在生成。它在很多层面都很糟糕。
你试过删除它吗？并将边距和填充转换为 px 而不是 pt
我的代码实际上有 margin:0 没有单位。 CKeditor 正在“帮助”我。

标签： html email gmail

【解决方案1】：

您的问题的具体答案是 Gmail 为仅包含图像的表格单元格添加了额外的空间。要解决此问题，请添加以下图片：

style="display:block"

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

【讨论】：

当我将这些电子邮件从 Outlook 发送到 gmail 时，样式属性永远不会显示。
来自 Outlook => Gmail。这不是我亲自尝试解决的问题。 Outlook 不是用于发起具有任何可靠格式的电子邮件活动的合适工具。至少，它是我上次开发的电子邮件活动中最疯狂的最不合规的代码修改器。已经好几年了。
完全同意我对公司 Outlook 页脚签名的要求。

【解决方案2】：

对于自己表格单元格中的任何图像，使用 display: block 和 line-height: 50%

<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />

将内边距设置为 0，边距设置为 0，尽管将边距设置为 -1px 可能会修复 iPhone/iPad 上的小间隙。

坚持：<style type="text/css"> img{display: block;}</style>

...在 body 标签内，而不是 head，因为它会被一些客户端剥离。

如果您的代码通过验证，请不要挂断电话，让电子邮件模板跨浏览器和客户端工作会导致一些丑陋的代码！

附：注意 Outlook 2007（它使用 Word 呈现引擎）和 Firefox 上的 Hotmail。

【讨论】：

【解决方案3】：

不知道是否有任何帮助，但在 www.campaignmonitor.com/css/ 处有不同电子邮件客户端中 CSS 支持的综合指南

【讨论】：

【解决方案4】：

在我的 html 中，我有很多表格单元格，它们并排包含多个相同高度的图像。事实证明，这种技术的问题是我无法让我的图像显示块，因为这会严重扰乱我的布局。原来，消除 gmail 差距的解决方案是简单地将 line-height: 50% 样式添加到表格本身。我在所有浏览器中进行了测试，结果都是积极的。老实说，我不是 100% 确定它为什么有效，或者它是否适用于所有情况，但如果你的情况和我一样，你可能想尝试一下这个解决方案。

PS，感谢@Jon 和@Jason 给了我这个想法。

【讨论】：

【解决方案5】：

如果您的表格单元格仅包含一张图片，并且您仍然看到图片下方有多余的空间，则解决方案是将line-height:0; 添加到表格单元格中。例如，<td style="line-height:0;">。

【讨论】：

【解决方案6】：

如果不想使用内联css，添加align="top" 和border="0"：

`<img src="" width="100" height="100" alt="" align="top" border="0" />`

【讨论】：

【解决方案7】：

我知道这是一篇较旧的帖子，但这对我有帮助，对于仍在寻找的人： <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

将您的图像包装在一个段落标签中，并将边距、字体大小和行高设置为“0”。我注意到 Outlook 和 Gmail 都添加了错误的段落、跨度和字体标签。希望这对其他人有帮助。

【讨论】：

【解决方案8】：

我通过使用 Dreamweaver 和图像映射 shdder 解决了这个问题。如果没有其他方法，我只会建议这样做，但它解决了我的问题。

【讨论】：