Html Div 样式在 Outlook 电子邮件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27765493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div styles not working in Outlook Emails
提问by Sunny Patial
I have created a HTML template for Emails using Div tags.
我已经使用 Div 标签为电子邮件创建了一个 HTML 模板。
Its working fine on Gmail, Yahoo.
它在 Gmail、Yahoo 上运行良好。
But Div styles not working in the Outlook.
但是 Div 样式在 Outlook 中不起作用。
Following is the code which i have used.
以下是我使用过的代码。
<div style="margin:auto;padding:auto;background-color:#FFFFFF;width:600px;border:0px;">
Testing Email
</div>
I have set divwidth 600px also make margin and padding auto. so that it will display in the center of the screen.
我已经将div宽度设置为 600px 也使边距和填充自动。以便它显示在屏幕中央。
But its not working like that.
但它不是那样工作的。
Gmail, Yahoo display email in the center of the screen
Gmail、Yahoo 在屏幕中央显示电子邮件
Please suggest how can i reslove this issue.
请建议我如何解决这个问题。
回答by LiamB
Float width and position CSS styles applied to div's do not work in Outlook.
应用于 div 的浮动宽度和位置 CSS 样式在 Outlook 中不起作用。
- Link Now Dead - https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/(See table half way down)
- 链接现已失效 - https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/（见下半部分表格）
This is the primary reason while Tables are still used so heavily in Emails.
这是在电子邮件中仍然大量使用表格的主要原因。
回答by Matej ?van
I would suggest you to make basic html structure using a table tag.
我建议您使用 table 标签制作基本的 html 结构。
You can then use "div" tags insde "td" tags.
然后，您可以在“td”标签中使用“div”标签。
Email templates are a pain because most of the cool stuf doesn't work :D
电子邮件模板很痛苦，因为大多数很酷的东西都不起作用：D
回答by Niente0
Here's the DIV properties compatibility table (taken from www.campaignmonitor.com, see LiamB answer):
这是 DIV 属性兼容性表（取自 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
回答by Richard Clifford
HTML emails are primarily table-based due to limited div support...mainly with Outlook Windows. You can use divs for some things but I would recommend only using it for mobileOn/mobileOff type classes and certain displays.
由于有限的 div 支持，HTML 电子邮件主要是基于表格的……主要是 Outlook Windows。您可以将 div 用于某些事情，但我建议仅将其用于 mobileOn/mobileOff 类型类和某些显示。
