我有一个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>
我需要进行哪些更改才能使其在Outlook中正确显示？
Jer*_*oen 46
为了能够为您提供特定的帮助,您必须解释具体哪些特定部分"搞砸了",或者提供屏幕截图.它还有助于了解您遇到问题的Outlook版本.
无论哪种方式,CampaignMonitor.com的CSS指南经常帮助我调试电子邮件客户端的不一致性.
从该指南中您可以看到一些在Outlook中根本无法正常工作的内容,以下是更重要的内容:
E:first-child,E:hover,E > F(儿童组合子), E + F(相邻的兄弟组合子), E ~ F(一般兄弟组合子).不幸的是,这意味着采用内联样式等变通方法.white-space不起作用.background-image物业将无法使用.height,width和max-版本或者不能使用,或对某些元素的错误.display,floats和position全部出局).简而言之:结合CSS和Outlook可能会很痛苦.准备好使用许多丑陋的解决方法.
PS.在您的特定情况下,您的HTML中有两个小问题,可能会导致您奇怪的行为.那里有" align=top你可能想要使用的地方" vertical-align.另外:cell-padding因为tds不存在.
scr*_*ola 15
你一定要查看关于css和html的Outlook支持的MSDN.链接在这里:http://msdn.microsoft.com/en-us/library/aa338201(v = office.12).aspx.如果您没有至少office 2007,则确实需要升级,因为2007和以前版本之间存在重大差异.还尝试将生成的电子邮件保存到文件并使用firefox进行检查,您将看到Outlook正在更改的内容,并可能有更具体的问题要询问.您也可以使用Word将电子邮件视为一种预览(但您不会获得有关哪些样式/未应用的信息.