Div 样式在 Outlook 电子邮件中不起作用

Question

我已经使用 Div 标签为电子邮件创建了一个 HTML 模板。

它在 Gmail、Yahoo 上运行良好。

但是 Div 样式在 Outlook 中不起作用。

以下是我使用过的代码。

<div style="margin:auto;padding:auto;background-color:#FFFFFF;width:600px;border:0px;">
Testing Email
</div>

我设置了 div 宽度 600px 也使边距和填充自动。这样它就会显示在屏幕中央。

但它不是那样工作的。

Gmail、Yahoo 在屏幕中央显示电子邮件

请建议我如何解决这个问题。

Answer 1

应用于 div 的浮动宽度和位置 CSS 样式在 Outlook 中不起作用。

• Link 现在死了 - https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/（见 table 一半）

这是表格在电子邮件中仍然大量使用的主要原因。

Answer 2

我建议您使用 table 标签制作基本的 html 结构。

然后您可以使用 "div" 标签插入 "td" 标签。

电子邮件模板很麻烦，因为大多数很酷的东西都不起作用:D

Answer 3

这是 DIV 属性兼容性 table （取自 www.campaignmonitor.com，请参阅 LiamB 回答）：

Client                  Float   Position  Margin  Width
Outlook 2003 / Express  Yes     Yes       Yes     Yes
Windows Live Hotmail    Yes     No        Yes     Yes
Yahoo! Mail             Yes     No        Yes     Yes
Outlook 2007 / 2010     No      No        Yes     No
iPhone                  Yes     Yes       Yes     Yes
Gmail                   Yes     No        Yes     Yes
Apple Mail 4            Yes     Yes       Yes     Yes
Lotus Notes 6.5 & 7     No      No        No      No

Answer 4

HTML 电子邮件主要是基于 table 的，因为 div 支持有限...主要是 Outlook Windows。 您可以将 div 用于某些事情，但我建议仅将其用于 mobileOn/mobileOff 类型 类 和某些显示。