HTML 电子邮件在 Outlook 2007 中未正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14986147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Email not displaying correctly in Outlook 2007
提问by Alex Kittavong
After a lot of time I put into researching. I still can't find an answer.
经过很多时间，我投入了研究。我仍然找不到答案。
I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.htmland here is a screenshot of how it looks in Outlook 2007:
我有一个 HTML，它在我的表格中显示错误的宽度。这是 html 电子邮件的链接：https: //tagwebstore.com/email/tag-email-10percentmore.html，这是它在 Outlook 2007 中的外观截图：
The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:
主要问题是底部区域。html 电子邮件的链接显示正确。我不知道从这里还能做什么。这是我遇到问题的底部代码：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We've been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It's a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
</tr>
<tr align="right">
<td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table></td>
<td width="28"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table>
<!--Testimonial End-->
<!--Footer-->
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;"><a href="mailto:[email protected]" style="color:#000000; text-decoration:none;">[email protected]</a> | 866.232.6477</td>
<td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter & YouTube</td>
<td valign="middle" width="102"><a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /></a><a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></a></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
The width of the containing table is suppose to be 625px. Any help is appreciated.
包含表的宽度假设为 625px。任何帮助表示赞赏。
回答by Pebbl
oh the joy of html emails
哦 html 电子邮件的乐趣
There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!
在处理基于 HTML 的电子邮件时，您必须遵守许多规则，尤其是当您有严格的客户和像素完美的设计时，我很高兴我至少有两年没有从事这样的项目了现在......我完全不喜欢这种做法的主要原因主要是两个电子邮件客户端。第一，所有的时间是最差的Lotus Notes 6.5.4 （公平地说这是10岁以上，现在..但仍然！） ，和所有的时间倒数第二（S），他们甚至没有在被坏人最好的，展望 2007 和 2010！
Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.
谁认为使用 Microsoft Word WYSIWYG HTML 引擎在 Outlook 2007 和 2010 中呈现 HTML 电子邮件是个好主意，一定是疯了、懒惰、迷失或有点困惑（酌情删除）。它会给开发人员带来无休止的渲染问题，通常是随机和莫名其妙的大小计算或填充问题。
Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
摘自我的博客http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
Simply put, I do not envy you :)
简单地说，我不羡慕你:)
I found the best way to help me out with my email troubles was to follow the following rules:
我发现帮助我解决电子邮件问题的最佳方法是遵循以下规则：
- Never use
colspansorrowspans. - Always set correct dimensions for your tables and cells.
- Use spacer gifs rather than
&nbps;. - Always specify correct image sizes and never scale images up or down.
- Always add
style="display:block;"to images. - Avoid using
divs. - If you wish to colour links, put the styling on a span as a child inside the
atag. - Don't use italics.
- Don't use BRs for layout, always use tables.
- Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).
- 永远不要使用
colspans或rowspans。 - 始终为您的表格和单元格设置正确的尺寸。
- 使用间隔 gif 而不是
&nbps;. - 始终指定正确的图像尺寸，切勿放大或缩小图像。
- 始终添加
style="display:block;"到图像。 - 避免使用
divs. - 如果您想为链接着色，请将样式作为
a标签内的子项放在跨度上。 - 不要使用斜体。
- 不要使用 BR 进行布局，始终使用表格。
- 在 Text 中使用 BRs，而不是 Ps（以避免严重的边距问题和段落被完全忽略）。
Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:
因为我过去收到的大量电子邮件最终变得荒谬可笑，所以我开发了一个脚本来帮助我检查尺寸和其他可能的陷阱。如果你有兴趣使用它，你可以在这里找到它：
The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:
该脚本可以作为通常的脚本标签添加或使用 GreaseMonkey 或类似的东西启用（它被设计为与 Firefox 一起使用，但我看不出为什么它不应该在其他地方工作）。由于我过去构建电子邮件的方式，它仅在满足以下任一条件时才会启用：
- There is an outer wrapping table that has
width="100%"set, used to centre the actual email content. - or... there is an outer element (a table or div) that has the
id="base".
- 有一个已
width="100%"设置的外部包装表，用于将实际电子邮件内容居中。 - 或者...有一个外部元素（表或 div）具有
id="base".
I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).
我已经通过它传递了您的 HTML，下面的图像是结果输出，当您拥有实际页面时它更有意义，因为您可以将鼠标悬停在每个带边框的项目上，它会让您大致了解问题是什么（或者或者您可以直接使用 Firebug 或类似工具检查元素）。
So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...
因此，通过检查上述内容，您似乎有一些需要解决的问题，我认为最重要的是摆脱 rowspans 和 colspans（这些总是会在 Outlook 中引起问题）并确保您的所有维度都相符正确。一旦你解决了这些问题，你可能会看到相当大的改进，但你也可能不会，HTML电子邮件构建的危险寿命没有确定性......
Hope it helps.
希望能帮助到你。
回答by John
Try this for your top table:
试试这个为你的顶桌：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
</td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28">
</td>
<td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We've been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It's a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
</td>
</tr>
<tr align="right">
<td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table>
</td>
<td width="28">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
</table>
and this for your bottom:
这对于你的底部：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
<a href="mailto:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a> | 866.232.6477
</td>
<td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
Follow us on Twitter & YouTube
</td>
<td valign="middle" width="49">
<a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" /></a>
</td>
<td valign="middle" width="53">
<a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...
总的来说，它的编码非常好，只是改变了一些小东西，并不是说每一个都是必须的，但如果它有效，你可以对更改进行逆向工程以找出破坏它的原因。我还没有测试过，所以希望这有效......
