GMail，MailChimp 在表格中的图像之间添加间距答案

【问题标题】：GMail, MailChimp adding spacing between images in tablesGMail，MailChimp 在表格中的图像之间添加间距
【发布时间】：2013-03-18 16:02:45
【问题描述】：

我在处理 GoogleMail 网络客户端中收到的电子邮件的电子邮件格式时遇到问题。

表格中的图片后添加空格，在我的内容中造成空白，与此问题完全相同 - Gmail displaying gaps between images。

添加内联样式 'display: block;'修复了 MailChimp 预览中的问题。

然而，在我在 MailChimp 中预览它们并在我的收件箱中接收它们之间的某个时间点，内联图像样式被删除，重新添加内联 CSS 再次手动修复它，所以这绝对是问题所在。

MailChimp 模板中的样式

<img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;">

GoogleMail 阅读时的样式

<img src="IMAGE_PATH" alt="" border="0" width="700" height="665">

这是有原因的吗？是在 MailChimps 还是 GoogleMails 端？

【问题讨论】：

标签： css gmail mailchimp

【解决方案1】：

看起来 Gmail 正在剥离 style 属性，因为它不喜欢某些东西。

有几件事可以尝试：

1) 删除样式声明开头的多余空格：

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     style="width:700px; display:block;">

2) 指定!important：（参考：http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css）

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     style="width:700px; display:block !important;">

3) 尝试将line-height 添加到包含td 元素：（参考：http://www.webdevdoor.com/html-css/html-email-development-tips/）

<td style="line-height:0px;">
   <img src="" id="headerImage campaign-icon" mc:label="header_image"
         mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
         style="width:700px; display:block;"></td>

更多尝试

4) 将width="700" 属性添加到img 标记中（也可以将height 加入），并且只在style 属性中指定display:block;：

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     width="700" height="665" style="display:block;">

这是另一个

5) HTML5 doctype 可能会导致呈现问题。尝试改用这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

最后一个...

6) 刚刚注意到您设置了mc:allowdesigner="" 和mc:allowtext=""，如果从这两个中删除="" 会发生什么？

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner mc:allowtext 
     style="width:700px; display:block;">

希望其中之一对您有用。

【讨论】：

我已经尝试了所有这些解决方案，除了 line-height 解决方案，但我 99% 确定它不会起作用，我会回复你，干杯
我现在都试过了，样式还在被移除（而且我不能真的有固定的高度，图像独立于模板（模板与不同的图像重复使用） ) 所以固定高度真的是最后的手段
为什么不发布您的模板代码并将其放入jsfiddle.net ...也许还有其他事情发生，或者有另一种方式来构建它以避免问题。
我使用浏览器构建模板代码进行预览，然后在 MailChimp 预览的帮助下进行测试和重构。没有其他办法，因为电子邮件 = 表格 = 噩梦
当然。您仍然可以发布代码，让另一双眼睛看着它，并可能在 MailChimp 中尝试它。我知道不想想把城堡的钥匙给别人，但如果你真诚地请求帮助......你至少需要让人们进入门厅。

【解决方案2】：

对我有帮助（在

中添加

）：

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img src="{IMG_PATH}/w_bottom.jpg" 
alt="" height="8" width="653"/></p></td>

【讨论】：

谢谢！这正是我的问题，Gmail 会自动添加我的代码缺少的段落。

【解决方案3】：

绝对不会Gmail 总是会在图片上去掉style="display: block"。正如@Fletch 所说，最简单的事情就是这样做：

<img src="" id="headerImage width="700" style="display: block;">

...而不是使用内联样式设置width。在某些情况下，Outlook 07/10 无论如何都不会遵守使用style 设置的宽度，因此以这种方式设置它是最安全的。或者完全省略宽度（响应式电子邮件设计所必需的）。

您需要将完整的代码放在某个地方，因为它必须是 HTML 中的其他内容导致问题，因为上面的代码完美运行。

【讨论】：

我知道上面的代码是有效的，而且我还有其他电子邮件没有删除 style='display: block;'如上所述，我已经尝试过使用和不使用宽度以及许多其他组合
当您在 MailChimp 编辑器中添加图像时，MailChimp 会自动添加我的问题中第二张图像中的高度
因此需要模板的完整代码：我已经通过 MailChimp 发送电子邮件没有问题。
它们是带有 mc:edit 属性 CherryFlavourPez 的图像吗？
Sam，至少，您应该提供一些周边代码来解决此问题。也许您在另一个可编辑的内容区域内有一个可编辑的图像？否则，这就像在黑暗中扔飞镖一样。当我能看到目标时，我的目标会好很多。我相信大多数人都会同意。

【解决方案4】：

我为此苦苦挣扎了很长时间，将此添加到该部分。

table{
        border:0px;
        border-spacing:0px;
        border-collapse:collapse;
    }
td{
        line-height:0px;
    }
tr{
        display:block;
}

我希望这能解决您的问题，因为这对我来说是一个非常令人沮丧的问题。

【讨论】：

你是我的英雄！谢谢！

【解决方案5】：

Gmail 会自动将段落标签添加到表格数据标签中。添加带有样式的段落标签对我有用。

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img /></p><td>

【讨论】：