Question

我正在构建一个基于表格的响应式电子邮件，其中包含一系列嵌套表格。我的总体布局如下： enter image description here

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

现在，在Outlook '07和'10中，使用Microsoft Word引擎呈现的内容，当第2个框达到某个高度时，它似乎正在插入页面/换行符，如建议here，{ {3}}和here。

我说出现是因为我不知道一种查看代码的方法，因为在这些实例中它实际上是由Outlook / Word解释的。问题是当输入这个中断时，它会强制box / table 3向下甚至是中断，如下所示： enter image description here

现在，我见过的一些消息来源建议使在它自己完成之前与<tr style="page-break-before: always">打破，但我认为这对于两个列堆栈。

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

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

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

enter image description here

所有这些元素都嵌套在一个更大的表中，但我想知道我需要做的是将整个文档分解为堆叠表以避免过长，并制作一个重复的表/框3以便table / box 3将显示在两列布局上，并且将按顺序显示在第二列中，保存在带有box / table 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="device-cols"] {
        width: 100%
    }
}

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

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

2 个答案: