经过大量的时间我投入研究。我仍然找不到答案。
我有一个在我的表格中显示错误宽度的HTML。以下是html电子邮件的链接:https://tagwebstore.com/email/tag-email-10percentmore.html,以下是Outlook 2007中的外观截图:
主要问题是底部区域。 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: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-->
包含表的宽度假设为625px。任何帮助表示赞赏。
答案 0 :(得分:25)
在处理基于HTML的电子邮件时,您必须遵守许多规则,尤其是当您拥有严格的客户端和像素完美的设计时,我很高兴我不必为此处的项目工作至少两年了...我完全不喜欢这种做法的主要原因主要是两个电子邮件客户端。第一次也是最糟糕的一次是Lotus Notes 6.5.4 (公平地说它现在已经超过10年了......但仍然!),并且历史上第二次最差(s),它们不是即便是最坏的,Outlook 2007和2010!
无论谁认为使用Microsoft Word WYSIWYG HTML引擎在Outlook 2007和2010中呈现HTML电子邮件是个好主意,一定是疯了,懒惰,丢失或者有点混淆(适当时删除)。它不会导致开发人员出现渲染问题,通常是随机且无法解释的大小计算或填充问题。
取自我的博客http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
简单地说,我不羡慕你:)
我发现帮助我解决电子邮件问题的最佳方法是遵循以下规则:
colspans
或rowspans
。&nbps;
。style="display:block;"
添加到图片。divs
。a
标记内作为子项的跨度上。因为我过去经历的电子邮件数量太多,所以我开发了一个脚本来帮助我检查尺寸和其他可能的陷阱。如果您对使用它感兴趣,可以在这里找到它:
脚本可以作为通常的脚本标记添加,也可以使用GreaseMonkey或类似的东西启用(它设计用于Firefox,但我认为没有理由不在其他地方使用)。由于我用来构建电子邮件的方式,只有在满足以下条件时才会自行启用:
width="100%"
,用于居中实际的电子邮件内容。id="base"
。我已经通过它传递了HTML,下面的图片是结果输出,当你拥有实际页面时更有意义,因为你可以将鼠标悬停在每个有边框的项目上,它会让你大致了解问题所在是(或者你可以直接用Firebug或类似的东西检查元素)。
因此,通过检查以上内容,您似乎有一些问题需要修复,我会说最重要的是摆脱rowpans和colspans(这些总是会导致Outlook出现问题)并确保所有问题你的尺寸正确。一旦你解决了这些问题,你可能会看到相当大的改进,但是你可能不会,HTML电子邮件构建的危险生命中没有确定性......
希望它有所帮助。
答案 1 :(得分:3)
试试顶级餐桌:
<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>
这是你的底部:
<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:info@tagwebstore.com" style="color:#000001; text-decoration:none;">info@tagwebstore.com</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>
总的来说它的编码非常好,只是更改了一些小东西,并不是说每个都是必须的,但如果它有效,你可以对这些变化进行反向工程,找出破坏它的原因。我没有测试过,所以希望这有效...