为 Outlook 格式化 html 电子邮件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5861714/
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
Formatting html email for Outlook
提问by user544079
I have an html newsletter which works in most email clients, but the formatting is messed up in Outlook.
我有一个适用于大多数电子邮件客户端的 html 通讯，但格式在 Outlook 中很混乱。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color: #98AFC7;
}
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
<tr>
<td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
</tr>
<tr>
<td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
</tr>
<tr>
<td>
<table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
<tr>
<td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
<h3>Top Stories</h3>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td valign="baseline" style="padding: 10px; border: 1px solid;">
<h3>Latest News</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;">
<strong>Copyright © 2011 Frost Miller Group </strong>
</td>
</tr>
<tr>
<td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
<center>
<a href="#">Contact Us</a>
<a href="#">Terms of Use</a>
<a href="#">Trademarks</a>
<a href="#">Privacy Statement</a>
<a href="#">Site Feedback</a>
</center>
</td>
</tr>
</table>
</body>
</html>
What changes do I need to make in order to get it to display correctly in Outlook?
我需要进行哪些更改才能使其在 Outlook 中正确显示？
回答by Jeroen
To be able to give you specifichelp, you's have to explain what particular parts specifically"get messed up", or perhaps offer a screenshot. It also helps to know what version of Outlook you encounter the problem in.
为了能够给你具体的帮助，你必须解释哪些特定的部分特别“搞砸了”，或者提供一个屏幕截图。它还有助于了解您遇到问题的 Outlook 版本。
Either way, CampaignMonitor.com's CSS guidehas often helped me out debugging email client inconsistencies.
无论哪种方式，CampaignMonitor.com 的 CSS 指南经常帮助我调试电子邮件客户端的不一致。
From that guide you can see several things just won't work well or at all in Outlook, here are some highlights of the more important ones:
从该指南中，您可以看到一些事情在 Outlook 中无法正常工作或根本无法正常工作，以下是更重要的一些重点：
- Various types of more sophisticated selectors, e.g.
E:first-child,E:hover,E > F(Child combinator),E + F(Adjacent sibling combinator),E ~ F(General sibling combinator). This unfortunately means resorting to workarounds like inline styles. - Some font properties, e.g.
white-spacewon't work. - The
background-imageproperty won't work. - There are several issues with the Box Model properties, most importantly
height,width, and themax-versions are either not usable or have bugs for certain elements. - Positioning and Display issues (e.g.
display,floats andpositionare all out).
- 不同类型的更复杂的选择，例如
E:first-child，E:hover，E > F（儿童组合子），E + F（相邻的兄弟组合子），E ~ F（一般兄弟组合子）。不幸的是，这意味着求助于内联样式之类的解决方法。 - 某些字体属性，例如
white-space不起作用。 - 该
background-image属性将不起作用。 - Box Model 属性存在几个问题，最重要的
height是width、 和max-版本要么不可用，要么某些元素存在错误。 - 定位和显示问题（例如
display，floats 和position全部出局）。
In short: combining CSS and Outlook can be a pain. Be prepared to use many ugly workarounds.
简而言之：结合 CSS 和 Outlook 可能会很痛苦。准备好使用许多丑陋的解决方法。
PS. In your specific case, there are two minor issues in your html that may cause you odd behavior. There's "align=top" where you probably meant to use vertical-align. Also: cell-paddingfor tds doesn't exist.
附注。在您的特定情况下，您的 html 中有两个小问题可能会导致您出现奇怪的行为。align=top您可能打算在“ ”处使用vertical-align. 另外：cell-paddingfor tds 不存在。
回答by scrappedcola
You should definitely check out the MSDN on what Outlook will support in regards to css and html. The link is here: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx. If you do not have at least office 2007 you really need to upgrade as there are major differences between 2007 and previous editions. Also try saving the resulting email to file and examine it with firefox you will see what is being changed by outlook and possibly have a more specific question to ask. You can use Word to view the email as a sort of preview as well (but you won't get info on what styles are/are not being applied.
您绝对应该查看 MSDN，了解 Outlook 将支持哪些关于 css 和 html 的内容。链接在这里：http: //msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx。如果您至少没有 office 2007，则确实需要升级，因为 2007 和以前的版本之间存在重大差异。还可以尝试将生成的电子邮件保存到文件并使用 Firefox 进行检查，您将看到 Outlook 正在更改的内容，并且可能有更具体的问题要问。您也可以使用 Word 将电子邮件作为一种预览来查看（但您不会获得有关哪些样式正在/未应用的信息。
回答by Arsh Khan
I used VML(Vector Markup Language) based formatting in my email template. In VML Based you have write your code within comment I took help from this site.
我在电子邮件模板中使用了基于 VML（矢量标记语言）的格式。在基于 VML 中，您在评论中编写了代码，我从该站点获得了帮助。
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable
