-->

HTML电子邮件无法在Outlook 2007中正确显示(HTML Email not displa

2019-08-17 02:07发布

大量的时间后,我投入研发。 我仍然无法找到答案。

我有一个显示我的表错宽度的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岁以上,现在..但仍然!),和所有的时间倒数第二(S),他们甚至没有最擅长的是坏, Outlook 2007和2010!

谁想到它会使用Microsoft Word中所见即所得的HTML引擎来呈现HTML电子邮件在Outlook 2007和2010年是一个好主意,一定是疯了,懒,丢失或不断所谓稍微混淆(删去不适用)。 它不会引起呈现问题的开发商,通常是随机和莫名的尺寸计算或填充问题的结束。

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

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

我发现帮助我与我的电子邮件麻烦的最好办法就是遵循以下规则:

  1. 切勿使用colspansrowspans
  2. 这一切都是为了你的表格和单元格设置正确的尺寸。
  3. 使用占位GIF,而不是&nbps;
  4. 始终指定正确的图像大小,从不缩放图像向上或向下。
  5. 随时添加style="display:block;" 为图像。
  6. 避免使用divs
  7. 如果你想颜色链接,把造型上的跨度为内部的孩子a标签。
  8. 不要使用斜体。
  9. 不要使用生物圈保护区布局,始终使用表。
  10. 使用生物圈中的文本,而不是PS(以避免STANGE保证金的问题,正在分段的能力,完全忽略)。

由于电子邮件的数量之多,我曾经打通结束了是荒谬的,我开发了一个脚本来帮我检查尺寸和其他可能存在的缺陷的工作。 如果您有兴趣使用它,你可以在这里找到:

http://pastie.org/6250834

该脚本可以被添加为常用的脚本标签或使用的GreaseMonkey或类似的东西(它的目的是与Firefox的工作,但我不明白为什么它不应该在别处工作)启用。 由于我用来建造我的电子邮件的方式,只会使自己如果任一下列条件:

  1. 存在具有外包裹表width="100%"设定,用于确定中心的实际电子邮件内容。
  2. 或...有一个外元件(一个表或DIV),具有id="base"

我已经通过它你的HTML和下面的图像的输出结果,它更有意义,当你有实际的页面,因为你可以将鼠标悬停在每一个边界项目,它会给你的问题是什么一个粗略的想法(或者这或者你可以直接与萤火虫或类似)检查的元素。

因此,从检查它上面好像你有需要修复的几个问题,我想说的最重要的是摆脱rowspans和colspans的(这些总是会导致Outlook中的问题),并确保所有的尺寸相符正确。 一旦你修正这些问题,你可能会看到一个相当大的改进,但话又说回来,你可能没有,有在HTML电子邮件建筑物的危险生活中没有确定性...

希望能帮助到你。



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

总的来说这是真的编码好,只是改变了一些小东西,不是说每个是一个必须具备的,但如果它的工作原理,你可以反向工程的变化,找出破获它。 我没有测试过,所以希望这个工程...



文章来源: HTML Email not displaying correctly in Outlook 2007