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 的电子邮件时，您必须遵守许多规则，尤其是当您有严格的客户和像素完美的设计时，我很高兴我没有在 at 这样的项目上工作至少两年了......我完全不喜欢这种做法的主要原因主要归结为两个电子邮件客户端。第一个也是有史以来最差的是 Lotus Notes 6.5.4 (公平地说，它现在已经超过 10 年了……但仍然如此!)，并且一直是第二个最差的，它们不是即使是最擅长做坏事的人，Outlook 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.

摘 self 的博客 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. 避免使用 div。
7. 如果您希望为链接着色，请将样式作为 a 标记内的子项放在 span 上。
8. 不要使用斜体。
9. 不要使用 BR 进行布局，始终使用表格。
10. 在文本中使用 BR，而不是 P(以避免出现空白边距问题和段落被完全忽略)。

由于我过去处理的电子邮件数量之多最终变得荒谬可笑，因此我开发了一个脚本来帮助我检查尺寸和其他可能的陷阱。如果您有兴趣使用它，可以在这里找到它:

http://pastie.org/6250834

该脚本可以作为普通的脚本标签添加，也可以使用 GreaseMonkey 或类似的东西启用(它设计用于 Firefox，但我认为没有理由不能在其他地方使用)。由于我过去构建电子邮件的方式，它只会在满足以下任一条件时自行启用:

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

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

所以从上面的检查看来你有一些问题需要解决，我想说最重要的是摆脱 rowspans 和 colspans(这些总是在 Outlook 中引起问题)并确保所有你的尺寸正确。解决这些问题后，您可能会看到相当大的改进，但也可能不会，因为 HTML 电子邮件构建的危险生活并不确定...

希望对您有所帮助。