为 Outlook 格式化 html 电子邮件 [英] Formatting html email for Outlook
问题描述
我有一个适用于大多数电子邮件客户端的 html 时事通讯，但格式在 Outlook 中很混乱.
I have an html newsletter which works in most email clients, but the formatting is messed up in 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>
我需要进行哪些更改才能使其在 Outlook 中正确显示?
What changes do I need to make in order to get it to display correctly in Outlook?
推荐答案
为了能够给你具体帮助，你必须解释哪些具体部分具体得到搞砸了"，或者提供屏幕截图.它还有助于了解您在哪个版本的 Outlook 中遇到问题.
To be able to give you specific help, 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.
无论如何，CampaignMonitor.com 的 CSS 指南经常帮助我调试电子邮件客户端的不一致.
Either way, CampaignMonitor.com's CSS guide has often helped me out debugging email client inconsistencies.
从该指南中，您可以看到在 Outlook 中有些地方无法正常工作或根本无法正常工作，以下是更重要的一些重点:
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:
- 各种类型的更复杂的选择器，例如
E:first-child,E:hover,E >F(子组合子)、E + F(相邻兄弟组合子)、E ~ F(一般兄弟组合子).不幸的是，这意味着求助于内联样式等变通方法. - 一些字体属性，例如
white-space不起作用. background-image属性不起作用.- Box Model 属性有几个问题，最重要的是
height、width和max-版本要么不可用，要么某些元素存在错误. - 定位和显示问题(例如
display、floats 和position都已解决).
- 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).
简而言之:结合 CSS 和 Outlook 可能会很痛苦.准备好使用许多丑陋的解决方法.
In short: combining CSS and Outlook can be a pain. Be prepared to use many ugly workarounds.
附注.在您的特定情况下，您的 html 中有两个小问题可能会导致您出现奇怪的行为.在align=top"中，您可能打算使用 vertical-align.另外:tds 的 cell-padding 不存在.
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-padding for tds doesn't exist.
这篇关于为 Outlook 格式化 html 电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
