div 填充/背景颜色在 Outlook 中不起作用答案

【问题标题】：Div padding/background-color not working in outlookdiv 填充/背景颜色在 Outlook 中不起作用
【发布时间】：2013-04-17 08:21:52
【问题描述】：

<div align="center" style="background:#bfcfe4;"><font face="Arial, Helvetica, sans-serif" style="font-size: 13px;"><br /><div style="width:666px; background-color:#ffffff; margin:10px auto 40px; padding:10px 34px 34px;"><table width="670" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; color:#000000;"><tr><td>some html here...</td></tr></table></div></div>

上图来自浏览器，下图来自 Outlook。如您所见，底部的填充不起作用。我不知道为什么会这样，请帮忙。

【问题讨论】：

这个模板是预制的，它在一个网站上应用了 200 多次，所有 200 个电子邮件模板都需要手动编辑，所以这将是客户不同意的。有没有可能解决这个问题？包括 IE 在内的所有浏览器都按要求显示电子邮件，但仅 Outlook 就有此问题。

标签： html css outlook html-email

【解决方案1】：

您的代码中发生了一些古怪的事情。这可能是以下三个问题之一：

页边距（您应该避免电子邮件中的页边距，因为支持参差不齐）
填充缺失的第 4 个值（Outlook 可能将其视为 0，导致左侧没有填充）
您的宽度不相加。 div 应该是表格的宽度 + 左填充 + 右填充。

与 div 相比，使用嵌套表会更好，因为它们引起的麻烦要少得多。

【讨论】：

感谢您对代码的敏锐观察。我删除了边距并添加了嵌套表格，它解决了所有问题。

【解决方案2】：

现在已经习惯了仅适用于 Outlook

<div style="padding-left:34px;padding-right:34px;padding-top:10px;" bgcolor="#bfcfe4">

【讨论】：

Div 标签没有 bgcolor 作为其属性。如果我错了，请纠正我。
使用样式="background-color:#ffffff;"对于 div。
对于任何阅读此内容的人 - div 标签确实支持 CSS 'background-color' 但不支持 'height' - 这让我误会了
我可以验证 bgcolor="#bfcfe4" 属性在 Outlook 中是否按预期呈现。