Question

我在我的电子邮件模板中有这个表格，并且由于某种原因，在Outlook 2013中，它的高度是实际设置的两倍：

[编辑现在，codel看起来像这样]

<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将忽略空表格单元格的高度，它的最小高度约为10px。你可以添加一个不间断的空间 ，这看起来是空的，但满足前景总是很尴尬。

Answer 2

所以我想分享我发现的解决方案，它在Outlook和常见的电子邮件收件箱中工作正常：基本上我需要在桌子上嵌套表格以使这个深蓝色部分在中间，低于600分辨率占据100％宽度。我需要添加字体大小和不可见的char ，因为否则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

html电子邮件outlook将我的表格大小翻倍

2 个答案: