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

Question

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

Mailchimp 是否对我的 Outlook 定位条件 cmets 进行了处理，我该如何解决？

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

截图：

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

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

条件 cmets：

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

<!--[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">

您也可以发布违规元素的 img 标签，以便我更好地查看它吗？

干杯

Answer 2

我感受到了您的痛苦，我为客户制作的模板也遇到了同样的问题。我想让图标经过视网膜验证，并让客户上传他想要的任何图像大小。不幸的是，在网上搜索了很多小时后，我在 MailChimp 帖子中读到了以下内容：

Outlook 无法识别限制图像的 HTML。这意味着 如果您使用 HTML 调整上传到广告系列的图片大小，或者 模板，它可能会在 Outlook 中以原始大小显示。务必 在将图像上传到 MailChimp 之前调整图像大小，或使用我们的 内置图像编辑器。

来源：MailChimp Knowledge Base

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

遗憾的是，我无法真正解释会发生什么，希望 MC 文章的链接能让您更好地了解它。 但我最好的答案是为您的 img 和 td 设置一个最大宽度和宽度。并告诉您的客户将图像调整为允许的大小。当您将鼠标悬停在 MailChimp 编辑器中的可编辑图像上时，设置最大宽度和宽度也会显示 #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>