Outlook 2016中邮件中的表格渲染错误

时间:2018-06-19 14:59:56

标签: html css email ms-office outlook-2016

我们在Outlook 2016中正确呈现邮件元素时遇到问题。它在Outlook 2013和其他邮件客户端(当然还有浏览器预览)中也可以正常工作,但是我们没有任何线索来解决此呈现问题适用于Outlook 2016。

此元素的布局思路是使用一个居中的白色背景框,该框应具有600px的宽度。此“内容框”左上角的第一个元素应该是黑框中的白色文本。黑色背景框的宽度应该(至少几乎)与文本长度相同(当然,此文本通常只是一行中的几个单词)。

尽管所有邮件客户端都将黑色背景框的大小缩短为文本字符串的大小,但是Outlook 2016将此框显示为元素宽度的约3/4(600px),即使我只是使用一个字母作为文本。

这是一个代码段:

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#FFFFFF">
    <tr>
        <td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="max-width:600px;">
    <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px;">
                <tbody>
                <tr>
                    <td bgcolor="#000000" align="left" style="width: 0px; font-family: 'Helvetica', Arial, sans-serif; color:#FFFFFF; font-weight: 500; font-size: 14px; text-transform: uppercase; padding: 5px 10px;">Boxcontent</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

如您所见,我们甚至重复了一些样式标签。 我们也在其他地方(在不同的上下文中)使用了此代码,而没有出现渲染问题,但无法识别是什么原因导致在Outlook 2016中像这样调整黑色背景框的宽度。

非常感谢您的提示!

Joerg

1 个答案:

答案 0 :(得分:0)

我认为您应该更改样式=“ max-width:600px;” for style =“ min-width:600px;”