Question

我在使用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方面？

Answer 1

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

要尝试的一些事项：

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"属性（可能还会height添加到img标记中，并仅在display:block;属性中指定style：

<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;">

希望其中一个适合你。

Answer 2

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

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

...而不是使用内联样式设置width。在某些情况下，Outlook 07/10在任何情况下都不会使用style服从宽度，所以最安全的设置方式就是这样。或者只是完全忽略宽度（响应式电子邮件设计所必需的）。

您需要将完整的代码放在某处，因为它必须是HTML中的其他内容导致问题，因为上述代码运行正常。

Answer 3

对我来说这是帮助（添加＆lt; p style =“margin：0; font-size：0; line-height：0;＆gt;＆gt;＆lt; td＆gt;）：

<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>

Answer 4

我在这方面挣扎了很长时间，将其添加到该部分。

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

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

Answer 5

Gmail会自动为表格数据标记添加段落标记。添加带有样式的段落标记对我有用。

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

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

5 个答案: