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

【问题标题】：Weird column behaviour in responsive email响应式电子邮件中的奇怪列行为
【发布时间】：2014-12-01 16:28:08
【问题描述】：

我正在为 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 中，第一个“两列”部分的右列，以“Twitterverse”开头的部分被推下大量；我不知道为什么。我考虑了“MS Word 1800px 分页符”问题，但不要认为这是正在发生的事情。你呢？
仅在 Outlook 中，三列“焦点”部分；当我在 HTML、CSS 或 MSOutlook 条件 CSS 中设置时，这三列拒绝站点内联，无论图像、表格或 td 宽度如何。只是不能让它玩得很好。它似乎也不是填充。

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

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

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

【问题讨论】：

标签： responsive-design outlook html-email mailchimp

【解决方案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

【讨论】：