html - Outlook 破坏响应式电子邮件布局

Question

我正在使用一系列嵌套表格构建基于表格的响应式电子邮件。我的总体布局如下所示:

用数字表示它们在 html 中的流。

现在，在使用 Microsoft Word 引擎呈现的 Outlook '07 和 '10 中，当方框 2 达到一定高度时，它似乎正在插入分页符/换行符，如建议的那样 here , here , 和 here .

我说出现是因为我不知道有什么方法可以查看这些实例中 Outlook/Word 实际解释的代码。问题是，当输入此中断时，它会强制 box/table 3 向下与中断保持一致，如下所示:

现在，我看到的一些来源建议，使它与 <tr style="page-break-before: always"> 决裂就在它自己完成之前，尽管我认为这对于没有两个列堆栈的人来说会更好。

正如上面 MailChimp 文章中所建议的，我还尝试实现条件代码以针对 <br/>元素:

<!--[if gte mso 9]>
    <style type="text/css">
br { display: none;}    </style>
<![endif]--> 

但我没有看到任何明显的差异。我有这个布局，因为它是响应式的，并且折叠成一个单独的列供移动电子邮件客户端使用，如下所示:

所有这些元素也嵌套在一个更大的表格中，但我想知道我是否需要做的是将整个文档分成堆叠表格以避免过长，并制作一个重复的表格/框 3 以便表/框 3 将显示在双列布局中，按顺序排在第二位，与框/表 1 一起保存在表中，然后对于单列移动显示，副本将设置为显示在当前表下方/box 2，但这会弄乱我的布局并且需要对两个位置进行相同的更新。

当前使用 align: 设置表格属性。

那么，有没有一种方法可以让 Outlook 不破坏表格，或者在不更改文档架构的情况下使它看起来一样？

Answer 1

您似乎非常了解 Outlook 分页问题。我会尝试围绕它进行设计，但这需要一些试验。使用较小的部分可能效果更好。

另一种选择是使用媒体查询，但并非 100% 支持它们，这可能是您想要流畅的首要动机。您可以尝试使用 Outlook 条件标记的媒体查询来强制仅在 Outlook 中定位。我知道这会变得困惑，但那是适合您的 html 电子邮件，并且可能是保持 Outlook 分页友好的流畅优先布局的唯一解决方案。