html - 为 Outlook 格式化 html 电子邮件

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

最佳答案

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

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

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

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

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

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

关于html - 为 Outlook 格式化 html 电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5861714/

html - 为 Outlook 格式化 html 电子邮件

上一篇：html - th 宽度不起作用？

下一篇：html - 括号错误地显示为从右到左的显示样式