Mailchimp会影响HTML中的Outlook特定条件注释 [英] Mailchimp affects my Outlook-specific conditional comments in HTML

问题描述

当我从Mailchimp发送到Outlook 2007，2013和2016时，我的HTML电子邮件模板无法正常呈现。事实上，当我直接上传HTML直接在Litmus上进行测试时，电子邮件会很好地覆盖所有Outlook预览。当我将测试邮件从Mailchimp发送到Litmus时，电子邮件在Outlook 2007，2013和2016（Win7）中看起来不成比例。

Mailchimp使用Outlook定位条件注释做某事，我该如何解决？

我有条件的评论似乎有时候可以修复我的MC电子邮件的某些元素的宽度（你会看到在截图中，文本框是正确的大小的顶卡，但不是在第二个）。但是对于我的生活，我无法弄清楚为什么一个人工作，另一个没有，我正在为两者写出同样的评论。

截图：

（出了什么问题）

当HTML直接渲染为Outlook （应该是什么样子）

条件注释

我已经放入Outlook特定的条件注释，如下所示： / p>

 <！ -  [if（gte mso 9）|（IE） ]< table align =centerborder =0cellspacing =0cellpadding =0width =600>  tr>< td align =centervalign =top width =600><！[endif]  - ><！ -  BODY TABLE  - >< table align =centerborder =0cellpadding =0cellspacin g =0width =100％style =max-width：600px;> ...< / table><！ -  [if（gte mso 9）|（IE）]> < / TD>< / TR>< /表>< ENDIF]  -  GT; <！/ code> 

感谢您的帮助！真的很感激。

解决方案

我感到你的痛苦，我为客户提供的模板也有同样的问题。我想使图标视网膜证明，并让客户端上传任何他想要的图像大小。不幸的是，经过许多小时的调试搜索网页后，我在MailChimp的帖子中阅读了以下内容：

Outlook无法识别HTML约束图像。这意味着
，如果您使用HTML调整上传到广告系列或
模板的图片大小，则可能会以Outlook的原始大小显示。请确保
在您将图像上传到MailChimp之前重新调整图像大小，或使用我们的
内置图像编辑器。

来源： MailChimp知识库

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

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

如果可能有任何帮助;看我下面的代码，我在我的模板中使它变得流畅。

 < table mc：repeable mc：variant =具有图像顶部和CTA的项目width =650cellpadding = 0cellspacing =0border =0align =centerclass =full-tablestyle =width：650px;> 
< tr> 
< td style =padding：30px 20px 40px 20px; BGCOLOR = ＃FFFFFF > 
< table width =100％cellpadding =0cellspacing =0border =0> 
< tr> 
< td style =padding-bottom：15px; max-width：610px;> 
< img src =/ images / img.jpgalt =xstyle =width：100％; max-width：610px; width =610mc：edit =article_image> 
< / td> 
< / tr> 
< / tr> 
< / table> 
< / td> 
  

I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).

Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?

My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.

Screenshots:

when Mailchimp sends the email to Outlook (what went wrong)

when the HTML is rendered for Outlook directly (what it's supposed to look like)

Conditional comments:

I've put in Outlook-specific conditional comments like so:

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

Thank you for the help! Really appreciate it.

解决方案

I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a 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.

source: MailChimp Knowledge Base

I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.

Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it. But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.

If it may help in any way; see my code below that I used in my templates to make it fluid.

<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特定条件注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！