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

我正在为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中，第一个“双列”中的右列n'部分，开始“Twitterverse”被大量推下;我无法弄清楚为什么。我认为'MS Word 1800px分页'问题，但不认为这是发生的事情。你做？
在Outlook中，只有三列“焦点”部分;当我将它设置在HTML，CSS或MSOutlook条件CSS中时，无论图像，表格或td宽度如何，这三列都会拒绝网站内联。只是不能让它发挥好。它似乎也不是填充。

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

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

请让我知道如果我忘了提及任何有关。一如既往，感谢您的全力帮助。

来源

2014-12-01 Rhecil Codes

我有这个问题，解决方案是有条件的评论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

来源

2014-12-09 13:54:25 Octav

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

回答

相关问题