【问题标题】:HTML Email not displaying correctly in Outlook 2007HTML 电子邮件在 Outlook 2007 中未正确显示
【发布时间】:2013-02-05 19:49:18
【问题描述】:

我花了很多时间研究。我还是找不到答案。

我有一个 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--> 

包含表格的宽度假定为 625 像素。任何帮助表示赞赏。

【问题讨论】:

  • 我在 Litmus 中测试了上述 URL 的完整源代码,它在 Outlook 2003/2007/2013 中运行良好。
  • 真的吗?我的同事对 2007 年的展望表明它确实不正常。这是她给我截的截图。还会是电脑吗?
  • 你是如何测试它的?如果您只是将源代码粘贴到 Outlook 中并邮寄,则 Outlook 可能会损坏代码。 Litmus.com 相当可靠。诚然,我没有检查过代码,但由于它在 Litmus 中呈现正常,我猜想它的测试方式存在问题。
  • 这是在 Outlook 2007 中使用 Litmus 对其进行测试的屏幕截图:s3.amazonaws.com/resultcaptures/…
  • 我正在使用 Infusionsoft 运行这些电子邮件活动。我正在使用 Mailchimp 的收件箱检查器查看预览,但在所有不同的邮件客户端中处理它需要很长时间。

标签: html html-email outlook-2007


【解决方案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. 切勿使用colspansrowspans
  2. 始终为表格和单元格设置正确的尺寸。
  3. 使用间隔 gif 而不是 &amp;nbps;
  4. 始终指定正确的图像尺寸,切勿放大或缩小图像。
  5. 始终将style="display:block;" 添加到图像中。
  6. 避免使用divs
  7. 如果您希望为链接着色,请将样式放在一个跨度上,作为a 标记内的子项。
  8. 不要使用斜体。
  9. 不要使用 BR 进行布局,始终使用表格。
  10. 在 Text 中使用 BR,而不是 Ps(以避免 stange 边距问题和段落被完全忽略)。

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

http://pastie.org/6250834

该脚本可以添加为普通脚本标签,也可以使用 GreaseMonkey 或类似工具启用(它旨在与 Firefox 一起使用,但我看不出它为什么不能在其他地方使用)。由于我过去构建电子邮件的方式,它只有在满足以下任一条件时才会启用:

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

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

所以从上面的检查来看,您似乎有一些问题需要解决,我想说最重要的是摆脱行跨度和列跨度(这些总是会导致 Outlook 出现问题)并确保所有您的尺寸正确计算。一旦你解决了这些问题,你可能会看到相当大的改进,但同样你可能不会,HTML 电子邮件构建的危险生命是不确定的......

希望对你有帮助。

【讨论】:

  • 哇,我真的很感激。看看问题出在哪里真的很有帮助。关于
    ,我一直得到不同的答案,因为现在outlook.com 和hotmail.com 将不再支持

    的底部边距。这是上个月宣布的。我还读到也不推荐使用间隔图像,主要是因为下载速度和垃圾邮件得分。 HTML 电子邮件总是让我头疼。我已经做了 3 年了,我仍在学习它们。感谢您的帮助,我将使用它来帮助查找问题。 :)

  • 用br的,比p的更一致。
  • @AlexKittavong 您实际上并不需要在电子邮件中使用间隔图像。在 Outlook 中,当表格与转发电子邮件分开时,会出现大多数间距问题(但这是另一个问题!)。您可以在&lt;td&gt; 上使用填充或使用&amp;nbsp;(如您的示例代码)创建空的&lt;td&gt;,以使其不会崩溃。对于文本块上方和下方的假填充,分别使用&amp;nbsp;&lt;br&gt;&lt;br&gt;&amp;nbsp;。如果 &amp;nbsp 在文本块的开头和结尾(表格单元格打开/关闭的位置)缺失,Outlook 会将其折叠。只需在段落之间使用&lt;br&gt;&lt;br&gt;
  • +1 表示从不使用rowspan 或colspan - 我只花了一个小时试图找出由rowspan 引起的问题。幸运的是,我在完全发疯之前找到了这个答案。
  • 非常感谢。你也帮助我避免发疯。 FWIW,你的规则给了我一个想法:由于重新编码以避免colspans很烦人,我将每个包装在一个中。电子邮件客户端中的表格总是为我排好队,我正在使用 Litmus 进行测试。这简化了代码并允许我在不重建 HTML 的情况下删除 colspan。由于 colspan,我从 Outlook 得到了奇怪的行为,但是在使用 colspan 之后的行中。
【解决方案2】:

在你的顶级桌子上试试这个:

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</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 &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 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">&nbsp;</td>
    </tr>
  </table>

这是你的底线:

  <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 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 &amp; 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">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

总体而言,它的编码非常好,只是更改了一些小东西,并不是说每个都是必须的,但如果它有效,您可以对更改进行逆向工程以找出破坏它的原因。我还没有测试过,所以希望这可行...

【讨论】:

  • 是的,这也有效。当我正确计算宽度时,我仍在试图弄清楚为什么我的宽度会偏离。我看到您在用作容器的 中使用了 100% 作为宽度。这样做比指定确切的宽度更好吗?
  • 它可能会双向工作,但它少了一个必须为您希望与父级宽度相同的东西设置宽度的地方。
  • 没错,这样就不会那么混乱了。
猜你喜欢
相关资源
最近更新 更多
热门标签