Question

我正在为MailChimp做一个响应式HTML电子邮件模板，并且在Windows上的Outlook 2003+中有一些特殊的行为。该模板具有响应性，但在Outlook中的桌面大屏幕中遇到了问题。我对此并不陌生，而且我通常能够让Outlook 2003+与我的设计相得益彰，但在这种情况下已经没有了想法。

为了提供上下文，在我的响应方法中，我尝试了这里描述的两种方法http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/，并且在这种情况下都没有工作。

电子邮件在我测试的所有其他邮件客户端和平台中都能完美呈现。

您可以在此处查看HTML：

呈现HTML - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.html
代码为.txt - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.txt

我遇到的两个具体问题是：

仅在Outlook中，第一列＆＃39;两列＆＃39;中的右栏。部分，开始＆＃34; Twitterverse＆＃34;被推下了很多;我无法解决原因。我考虑过MS Word 1800px分页符＆＃39;问题，但不要认为这是正在发生的事情。你呢？
仅在Outlook中，三栏＆＃39; In Focus＆＃39;部分;当我在HTML，CSS或MSOutlook条件CSS中设置它时，三列拒绝站点内联，无论图像，表格或td宽度如何。只是不能让它发挥得很好。它似乎也不是填充物。

我真的希望有精通响应式电子邮件设计的人可以将模板导入他们的MailChimp，在Outlook 2007或2013中向自己发送测试，让我知道他们的想法。

下载模板ZIP - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.zip

如果我忘记提及相关内容，请告诉我。一如既往，感谢您的帮助。

Answer 1

我有这个问题，解决方案是对mso的条件评论。您只需为Outlook添加表以使列保持内联。

<!--[if gte mso 9]>
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for first column here...
<!--[if gte mso 9]>
            </td>
            <td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for second column here...
<!--[if gte mso 9]>
            </td>
            <td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for third column here...
<!--[if gte mso 9]>
            </td>
        </tr>
    </table>
<![endif]-->

此处示例：https://litmus.com/community/discussions/277-outlook-2007-2010-3-column-issue

响应式电子邮件中的奇怪列行为

1 个答案: