4

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

表格中的图像在我的内容中造成间隙后添加空格，与此问题完全相同 - Gmail 显示图像之间的间隙。

添加内联样式 '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 方面？

4

5 回答 5

4

看起来 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=""and 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;">

希望其中之一对您有用。

于 2013-04-03T13:26:32.487 回答
3

对我来说这是有帮助的（在 <td> 中添加 <p style="margin: 0;font-size: 0;line-height: 0;"> ）：

<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>
于 2014-12-05T13:15:33.457 回答
2

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

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

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

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

于 2013-04-04T13:29:44.713 回答
1

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

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

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

于 2016-01-11T22:22:43.917 回答
0

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

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img /></p><td>
于 2015-05-05T16:07:34.867 回答