Question

我有一个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中正确显示？

Answer 1

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

无论哪种方式，CampaignMonitor.com's CSS guide经常帮助我调试电子邮件客户端的不一致。

从该指南中您可以看到有些内容在Outlook中无法正常运行或根本无法运行，以下是更重要内容的一些亮点：

各种类型的更复杂的选择器，例如E:first-child，E:hover，E > F（子组合子），E + F（相邻兄弟组合子），E ~ F（一般兄弟组合子）。不幸的是，这意味着采用内联样式等解决方法。
某些字体属性，例如white-space无效。
background-image属性不起作用。
Box模型属性存在多个问题，最重要的是height，width，max-版本不可用或某些元素存在错误。
定位和展示问题（例如display，float和position都已完成。

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

PS。在您的特定情况下，您的HTML中有两个小问题，可能会导致您奇怪的行为。您可能想要使用align=top“vertical-align”。另外：cell-padding的{{1}}不存在。

Answer 2

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

Answer 3

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

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

格式化Outlook的html电子邮件

3 个答案: