12

我花了很多时间研究。我仍然找不到答案。

我有一个 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。任何帮助表示赞赏。

4

2 回答 2

26

哦 html 电子邮件的乐趣

在处理基于 HTML 的电子邮件时，你必须遵守许多规则，尤其是当你有严格的客户和像素完美的设计时，我很高兴我至少两年没有从事这样的项目现在......我完全不喜欢这种做法的主要原因主要是两个电子邮件客户端。第一个也是有史以来最差的是 Lotus Notes 6.5.4 （公平地说，它现在已经超过 10 年了.. 但仍然！），以及有史以来第二个最差的版本，它们甚至不是最糟糕的，展望 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. 在 Text 中使用 BR，而不是 Ps（以避免 stange 边距问题和段落被完全忽略）。

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

http://pastie.org/6250834

该脚本可以添加为通常的脚本标签或使用 GreaseMonkey 或类似的东西启用（它被设计为与 Firefox 一起使用，但我看不出它为什么不应该在其他地方工作）。由于我过去构建电子邮件的方式，它只有在满足以下任一条件时才会启用：

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

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

我的电子邮件检查器脚本的 ss 我的电子邮件检查器的解释

因此，通过检查上述内容，您似乎有一些问题需要解决，我想说最重要的是摆脱行跨度和跨度（这些总是会在 Outlook 中引起问题）并确保您的所有尺寸都符合正确。一旦你解决了这些问题，你可能会看到相当大的改进，但你可能不会再次看到，HTML 电子邮件构建的危险生命是不确定的......

希望能帮助到你。

于 2013-02-20T18:27:51.147 回答
3

试试这个为你的顶桌：

<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>

总的来说，它的编码非常好，只是改变了一些小东西，并不是说每一个都是必须的，但如果它有效，你可以对这些更改进行逆向工程，找出是什么破坏了它。我还没有测试它，所以希望这有效......

于 2013-02-20T19:07:05.120 回答