为 Outlook 格式化 html 电子邮件答案

【问题标题】：Formatting html email for Outlook为 Outlook 格式化 html 电子邮件
【发布时间】：2011-05-02 19:43:39
【问题描述】：

我有一个适用于大多数电子邮件客户端的 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 &copy 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>
            &nbsp;
            <a href="#">Terms of Use</a>
            &nbsp;
            <a href="#">Trademarks</a>
            &nbsp;
            <a href="#">Privacy Statement</a>
            &nbsp;
            <a href="#">Site Feedback</a>
            </center>
        </td>
    </tr>
    </table>
</body>
</html>

我需要进行哪些更改才能使其在 Outlook 中正确显示？

【问题讨论】：

另见： emailonacid.com/blog/article/email-development/…

标签： html css outlook

【解决方案1】：

为了能够具体为您提供帮助，您必须说明具体“搞砸了”的特定部分，或者提供屏幕截图。它还有助于了解您在哪个版本的 Outlook 中遇到问题。

不管怎样，CampaignMonitor.com's CSS guide 经常帮助我解决电子邮件客户端的不一致问题。

从该指南中，您可以看到一些事情在 Outlook 中无法正常工作或根本无法正常工作，以下是更重要的一些亮点：

各种更复杂的选择器，例如E:first-child、E:hover、E > F（子组合器）、E + F（相邻兄弟组合器）、E ~ F（通用兄弟组合器）。不幸的是，这意味着求助于内联样式等变通方法。
一些字体属性，例如white-space 不起作用。
background-image 属性不起作用。
Box Model 属性存在几个问题，最重要的是height、width 和max- 版本要么不可用，要么存在某些元素的错误。
定位和显示问题（例如，display、floats 和 position 都已解决）。

简而言之：将 CSS 和 Outlook 结合起来可能会很痛苦。准备好使用许多丑陋的解决方法。

PS。在您的具体情况下，您的 html 中有两个小问题可能会导致您出现奇怪的行为。有“align=top”你可能打算使用vertical-align。另外：cell-padding for tds 不存在。

【讨论】：

许多年后，Microsoft Outlook 2013 仍然拥有与 Outlook 2007 相同的 HTML 呈现引擎。:(
@Zarepheth 是的，我也每 6 到 18 个月重新审视一次自己的答案，有时我什至在谷歌上搜索时会来到这里。
我偶然发现了一个有用的补充：要实际测试 HTML 电子邮件在 Outlook 中的呈现方式，您可以在 Word 中打开 HTML 文件，两个 MS Office 应用程序使用相同的呈现引擎。

【解决方案2】：

您绝对应该查看 MSDN，了解 Outlook 在 css 和 html 方面将支持哪些内容。链接在这里：http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx。如果您至少没有 Office 2007，则确实需要升级，因为 2007 和以前的版本之间存在重大差异。还可以尝试将生成的电子邮件保存到文件并使用 Firefox 检查它，您将看到 Outlook 正在更改的内容，并且可能有更具体的问题要问。您也可以使用 Word 将电子邮件作为一种预览来查看（但您不会获得有关正在应用/未应用哪些样式的信息。

【讨论】：

保存为 HTML 然后在浏览器中检查它是一个很好的建议（并且对我有很大帮助） - 谢谢

【解决方案3】：

我在我的电子邮件模板中使用了基于 VML（矢量标记语言）的格式。在基于 VML 中，您已在注释中编写代码我从这个网站获得了帮助。

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable

【讨论】：

请避免仅提供链接的答案，并实际回答您帖子中的问题。