2

我正在构建一个基于表格的响应式电子邮件,其中包含一系列嵌套表格。我的总体布局如下所示: 在此处输入图像描述

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

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

我说出现是因为我不知道在这些情况下查看代码的方法,因为它实际上是由 Outlook/Word 解释的。问题是,当输入此中断时,它会强制框/表 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 的表格中,然后对于单列移动显示,副本将设置为显示在当前表/框 2 下方,但这会打乱我的布局需要对两个位置进行相同的更新。

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

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

4

2 回答 2

1

您似乎很好地掌握了 Outlook 分页符问题。我会尝试围绕它进行设计,但这需要一些试验。使用较小的部分可能会更好。

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

于 2013-09-27T14:16:22.843 回答
-1

我遇到了类似的问题,我可以使用以下代码对其进行排序。这里的想法是使用具有百分比宽度的表 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,并在响应式设备中叠加。

于 2017-10-10T11:48:04.560 回答