Responsive design 回复电子邮件中的怪异专栏行为

我正在为MailChimp制作一个响应性HTML电子邮件模板，并且在Windows上的Outlook 2003+中有一些特殊的行为。该模板是响应性的，但在桌面、Outlook的大屏幕上都会遇到问题。我不是新手，通常可以让Outlook 2003+很好地处理我的设计，但在这种情况下，我已经没有想法了

为了提供上下文，在我的响应方法中，我尝试了这里描述的两种方法，但在本例中都不起作用

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

您可以在此处查看HTML：

• 呈现HTML-
• 代码为.txt-

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

仅在Outlook中，“Twitterverse”开头的第一个“两栏”部分的右栏被大量向下推；我不明白为什么。我考虑过“MS Word 1800px分页符”问题，但我不认为这是正在发生的事情。你知道吗

仅在Outlook中，三列“焦点”部分；当我在HTML、CSS或MSOutlook条件CSS中设置这三列时，无论图像、表格或td宽度如何，这三列都拒绝站点内联。只是不能让它玩得很好。它似乎也不是填充物

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

• 下载模板ZIP-

---

如果我忘了提及任何相关的事情，请告诉我。一如既往，谢谢你的帮助

我遇到了这个问题，解决办法是对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]-->

…此处第一列的响应html代码。。。
…此处第二列的响应html代码。。。
…此处第三列的响应html代码。。。

示例如下：