Mailchimp 影响我在 HTML 中特定于 Outlook 的条件注释

Question

当我的 HTML 电子邮件模板从 Mailchimp 发送到 Outlook 2007、2013 和 2016 时，我无法正确呈现它。问题是，当我直接上传 HTML为了在 Litmus 上进行测试，电子邮件在所有 Outlook 预览中都呈现良好。当我将测试电子邮件从 Mailchimp 发送到 Litmus 时，该电子邮件在 Outlook 2007、2013 和 2016（对于 Win7）中看起来不成比例。

Mailchimp 是否对我针对 Outlook 的条件评论做了什么，我该如何解决？

我的条件注释似乎有效有时可以固定我的 MC 电子邮件中某些元素的宽度（您会在屏幕截图中看到，文本框的大小适合顶牌，但不在第二张牌上）。但是对于我的一生，我无法弄清楚为什么一个有效而另一个无效，我正在为两者写相同的评论。

截图：

when Mailchimp sends the email to Outlook （出了什么问题）

when the HTML is rendered for Outlook directly（它应该是什么样子）

条件注释：

我已经像这样放入特定于 Outlook 的条件注释：

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->

<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>

<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

感谢您的帮助！非常感谢。

Answer 1

您是否在电子邮件中使用视网膜图像？根据经验，我发现 outlook 的，如果给他们一个大图像，如果没有为 img 标签分配特定宽度，他们会以大尺寸显示它。以下是我用于电子邮件中图片的代码示例。

<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">

你也可以 post 违规元素的 img 标签，这样我可以更好地看一下吗？

干杯

Answer 2

我感受到你的痛苦，我为客户制作的模板也遇到了同样的问题。我想制作图标视网膜证明，并让客户上传他想要的任何图像尺寸。不幸的是，经过许多小时调试和搜索网络后，我在 MailChimp post 上阅读了以下内容：

Outlook doesn’t recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to MailChimp, or use our built-in image editor.

来源：MailChimp Knowledge Base

我真的不相信这是真的，所以我一直试图限制图像。我在 img、td、tr、table.. 上设置了固定宽度。没有任何帮助。

遗憾的是我无法真正解释发生了什么，希望 MC 文章的 link 能让您更好地了解它。但我最好的答案是为你的 img 和 td 设置一个 max-width & width 。并告诉您的客户将图像调整为允许的大小。当鼠标悬停在 MailChimp 编辑器中的 editable 图像上时，设置 max-width 和宽度也会显示 #px。我还发现，当您上传更大的尺寸时，MailChimp 会发出一个小小的警告。

如果有任何帮助；请参阅下面我在模板中使用的代码以使其流畅。

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Mailchimp 影响我在 HTML 中特定于 Outlook 的条件注释

Mailchimp affects my Outlook-specific conditional comments in HTML

html

email

outlook

mailchimp

litmus