GMail, MailChimp在表格中增加图像之间的间距

我在使用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或谷歌邮件方面?

看起来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"属性(也许扔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 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;">

<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将总是删除图像上的style="display: block"。正如@Fletch所说，最简单的事情是这样做:

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

…而不是使用内联样式设置width。Outlook 07/10在某些情况下不会遵守使用style设置的宽度，所以这样设置是最安全的。或者干脆完全忽略宽度(这对于响应式电子邮件设计是必要的)。

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

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

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

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

Gmail自动在表格数据标签中添加段落标签。给段落添加一个样式标签对我来说很有效。

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

相关内容

最新更新

热门标签：