html 电子邮件 outlook 使我的 table 大小翻倍

Question

我的 e.mail 模板中有这个 table，出于某种原因，在 Outlook 2013 中它看起来比实际设置的高度高一倍：

[现在编辑代码看起来像这样]

<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
            <tr class="preheader" width="100%" style="background-color:#d8ebf6;">
                <td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
            </tr>
        </table>

DEMO 也许有一些关于为什么会发生这种情况或如何解决问题的想法？

Answer 1

所以我想分享我发现的解决方案，它在 outlook 和普通电子邮件收件箱中都能正常工作：基本上我需要将 table 嵌套在 table 中以获得中间的深蓝色部分，低于 600 的分辨率占用 100% 的宽度。而且我需要添加字体大小和不可见字符 ，因为否则 outlook 会生成两行而不是预期的一行。

使用之前发布的代码并在 <td></td> 标签之间添加不可见字符并添加字体大小也有帮助，但在移动设备（低于 600 分辨率）上这些不可见字符会在左右留下小的空白，所以深蓝色没有按要求占用整个宽度。

代码：

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
                <tr class="preheader" style="background-color:#d8ebf6;">
                    <td align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
                            <tr>
                                <td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
                                &#8203;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

DEMO

Answer 2

Outlook 将忽略空 table 单元格的高度，它的最小高度约为 10 像素。你可以添加一个不间断的 space   这看起来是空的，但满足了总是尴尬的外观愿望。

html 电子邮件 outlook 使我的 table 大小翻倍

html email outlook doubles size of my table

html

email

outlook