Outlook 打破了响应式电子邮件布局

Question

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

用数字代表他们在 html 中的流程。

现在，在 Outlooks '07 和 '10 中，使用 Microsoft Word 引擎呈现的那些，当框 2 达到一定高度时，它似乎正在插入分页/换行符，如此处、 此处和此处所建议的。

我说出现是因为我不知道有什么方法可以查看代码，因为在这些情况下 Outlook/Word 实际上解释了代码。 问题在于，当输入此中断时，它会强制框/表 3 与中断保持一致，如下所示：

现在，我看到的许多消息来源都建议，在它自己做之前，让它与<tr style="page-break-before: always"> ，尽管我认为这对没有 out 的人会更好两列堆栈。

正如上面 MailChimp 文章中所建议的，我还尝试实现条件代码来定位<br/>元素：

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

但我没有看到任何明显的差异。 我有这种布局是因为它具有响应性，并且可以为移动电子邮件客户端折叠成一列，如下所示：

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

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

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

Answer 1

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

另一种选择是使用媒体查询，但它们不是 100% 支持的，这可能是您首先进行流畅的动机。 您可以尝试使用 Outlook 条件标签进行媒体查询，以仅在 Outlook 中强制定位。 我知道变得凌乱，但这对您来说是 html 电子邮件，并且可能是保持 Outlook 分页友好的流体优先布局的唯一解决方案。

Answer 2

我遇到了类似的问题，我可以使用以下代码对其进行排序。 这里的想法是使用具有百分比宽度的表 td（左列将有 75%，右列将是 25%）并使用媒体查询覆盖小屏幕设备中的宽度。 我将在下面发布代码：

HTML

<tr>
<td align="left" valign="top" width="100%" style="padding:0 0 0 0px;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
        <tbody>
            <tr>
                <td width="75%" class="responsive-helper">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="right" >
                        <tr>
                            <td class="block" align="left" valign="top"  style="padding:25px 0 0;">
                                <img src="images/image1.jpg" style="width:100%;" alt=" " border="0"/>
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="25%" class="responsive-helper">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="right" >
                        <tr>
                            <td class="block" align="left" valign="top"  style="padding:25px 0 0;">
                                <img src="images/image2.jpg" style="width:100%;" alt=" " border="0"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</td>

CSS：

<style type="text/css">
@media only screen and (max-width:560px) {
    td[class="responsive-helper"] {
        width: 100%
    }
}

这适用于所有版本的 Outlook 并在响应式设备中堆叠。