HTML电子邮件无法在Outlook 2007中正确显示

Question

经过大量的时间我投入研究.我还是找不到答案.

我有一个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">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</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 &ndash; 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">&nbsp;</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">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 &amp; 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">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

  <!--Footer End--> 

包含表的宽度假设为625px.任何帮助表示赞赏.

Answer 1

哦,HTML电子邮件的喜悦

在处理基于HTML的电子邮件时,您必须遵守许多规则,特别是当您拥有严格的客户端和像素完美的设计时,我很高兴我至少两年不必在这样的项目上工作现在......我完全不喜欢这种做法的主要原因主要是两个电子邮件客户端.第一次也是最糟糕的是Lotus Notes 6.5.4 (为了公平它现在已经超过10年了......但仍然!),而且历史上第二次最糟糕的时候,它们甚至都不是最糟糕的, Outlook 2007和2010!

无论谁认为使用Microsoft Word WYSIWYG HTML引擎在Outlook 2007和2010中呈现HTML电子邮件都是一个好主意,一定是疯了,懒惰,丢失或者有点混淆(根据需要删除).它不会导致开发人员出现渲染问题,通常是随机且无法解释的大小计算或填充问题.

取自我的博客http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html

简单地说,我不羡慕你:)

我发现帮助我解决电子邮件问题的最佳方法是遵循以下规则:

1. 永远不要使用colspans或rowspans.
2. 始终为表格和单元格设置正确的尺寸.
3. 使用间隔gif而不是&nbps;.
4. 始终指定正确的图像尺寸,切勿向上或向下缩放图像.
5. 始终添加style="display:block;"到图像.
6. 避免使用divs.
7. 如果您希望为链接着色,请将样式放在a标记内作为子项的跨度上.
8. 不要使用斜体.
9. 不要使用BR进行布局,始终使用表格.
10. 在文本中使用BR而不是Ps(以避免标注边距问题和段落被完全忽略).

因为我过去经常收到的电子邮件数量很多,所以我开发了一个脚本来帮助我检查尺寸和其他可能的陷阱.如果您对使用它感兴趣,可以在此处找到它:

http://pastie.org/6250834

该脚本可以作为通常的脚本标记添加或使用GreaseMonkey或类似的东西启用(它被设计为与Firefox一起使用但我看不出它为什么不能在其他地方工作).由于我用来构建我的电子邮件的方式,它只会在满足以下条件时自行启用:

1. 外部包装表已width="100%"设置,用于居中实际的电子邮件内容.
2. 或者......有一个外部元素(表格或div)id="base".

我通过它传递了你的HTML,下面的图片是结果输出,当你拥有实际页面时更有意义,因为你可以将鼠标悬停在每个有边框的项目上,它会让你大致了解问题所在(或者或者您可以直接使用Firebug或类似方法检查元素.

所以从检查上面看来你似乎有一些需要修复的问题,我会说最重要的是摆脱rowpans和colspans(这些总是会导致Outlook出现问题)并确保你所有的尺寸记录正确.一旦你解决了这些问题,你可能会看到相当大的改进,但是你可能不会,HTML电子邮件构建的危险生命中没有确定性......

希望能帮助到你.