HTML电子邮件在Outlook 2007中无法正确显示 [英] HTML Email not displaying correctly in Outlook 2007
问题描述
我的表格中有一个显示错误宽度的HTML。这是一个html电子邮件的链接：简单地说，我不羡慕你：）
我发现了最好的方法帮我解决我的电子邮件问题是遵循以下规则：
- 切勿使用
colspans或rowspans。 - 总是为您的表格和单元格设置正确的尺寸。使用spacer gif而不是
& nbps;。 总是指定正确的图片大小，并且永远不会缩放图片。 > - 总是在图像中添加
style =display：block;。
- 避免使用
div。 - 如果您希望颜色链接，请将样式放在
atag。 - 不要使用斜体。
- 不要我们
- 在文本中使用BR，而不是Ps（为避免出现边界边界问题并且段落被完全忽略）。
ol> - 包装表，其中包含
width =100％set，用于居中实际的电子邮件内容。 具有 - 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).
- 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".
因为我过去经常遇到的电子邮件数量太过荒谬，我开发了一个脚本来帮助我检查维度和其他可能的陷阱。如果你有兴趣使用它，你可以在这里找到它：
该脚本可以添加为通常的脚本标记，也可以使用GreaseMonkey或类似的东西启用（它的设计目的是与Firefox合作，但我没有看到为什么它不应该在其他地方工作）。由于我用于构建电子邮件的方式，只有满足以下条件时才能启用自身： 有
id =base的外部元素（表格或div）。 我通过它传递了HTML，下面的图像是结果输出，当你有实际的页面时更有意义，因为你可以将鼠标悬停在每个有边界的项目上，它会给你一个粗略的想法，问题是（或者你可以直接用Firebug或类似的方式检查元素）。
因此，从上面的检查看来，您需要解决一些问题，我'd说最重要的是摆脱rowspans和colspans（这些总是在Outlook中导致问题），并确保所有的维度都正确。一旦你解决了这些问题，你可能会看到相当大的改进，但是你可能再也不会这么做了，HTML电子邮件大楼的危险生活中没有确定性......
希望它有帮助。
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.html and here is a screenshot of how it looks in 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:
<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:info@tagwebstore.com" style="color:#000000; text-decoration:none;">info@tagwebstore.com</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.
oh the joy of html emails
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!
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.
Taken from my blog 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:
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:
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).
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...
Hope it helps.
这篇关于HTML电子邮件在Outlook 2007中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
