HTML 电子邮件 – 为什么使用 Outlook 2010 打开邮件时某些元素不显示？答案

【问题标题】：HTML email for – why do some elements not display when mail is opened with Outlook 2010?HTML 电子邮件 – 为什么使用 Outlook 2010 打开邮件时某些元素不显示？
【发布时间】：2013-10-23 15:57:53
【问题描述】：

编辑：添加图片。

我正在开发一个 html 电子邮件模板。经过大量的血汗和泪水，现在在我们设计的邮件客户端中看起来或多或少是一样的：

http://i.imgur.com/aAPcvVv.png

但由于某种原因，Outlook 2010 不会显示副标题和主图像。

http://i.imgur.com/OvcDOYX.png

所有图像都存储在同一台服务器上，但只有徽标和 M 图标显示。

代码如下：

<!DOCTYPE HTML PUBLIC 
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Newsletter</title>

  </head>
  <body style="background-color:#f5f5f5; color:#695e4a; font-family: Arial, Helvetica, sans-serif; font-size:12px; margin-top:0px; padding:auto;">

  <style type="text/css">

  a, h1, h2, span, p {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }



    table, caption, tbody, tfoot, thead, tr, th, td{
      margin: 0;
  padding: 0;
 /* border: 0;
*/  font-size: 100%;
  font: inherit;
    }
    .readmore{
      color:#246877;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 10px;
      letter-spacing: 1px;
      text-decoration: none;
    } 


  </style>
    <table style="padding:none; border:none; border-spacing:0; width:608px" align="center" cellspacing="0">


  <tr>
    <td rowspan="2" style="border-right: 1px solid #e9e9e9; width:3px; "></td>
    <td colspan="2" align="right" style="background-color:#ffffff; font-family: Arial, " HelveticaNeue?,Helvetica,sans-serif;?="">
      <br><a style="margin:50px 25px; font-size:9px; color:#b9b9b9; text-decoration:none" href="">View in browser</a>
      <div style="border-bottom: 1px solid #f6f6f6; margin:5px 25px;"></div>
    </td>
    <td rowspan="2" style="border-left: 1px solid #e9e9e9; width:3px;  "></td>
  </tr>
   <!-- Header with LOGO, date, category, BEFORE content -->
  <tr>

    <td style="width:275px; height: 89px; background-color:#ffffff; padding:10px 0px 10px 25px"><img src="[removed due to non disclosure contract]"></td>
    <td style="text-align:right; width:275px; height: 89px; background-color:#ffffff; color:#6a604c; font-size:9px; text-transform:uppercase; line-height:13px; padding-right:25px;">
      <span style="font-family: Arial, Helvetica, sans-serif;">Monday, July 1st, 2013<br>optional communication category</span>
    </td>
  </tr>
  <!-- Heading Ribbon -->
  <tr>
    <td colspan="4" style="background-color:#dbd1cd; height:50px;  padding-left:29px">
      <table cellspacing="0">
        <tr>
          <td style="width:522px">
            <h1 style="text-transform:uppercase; font-size:22px; font-weight: normal; color:#6a604c; font-family: Arial, Helvetica, sans-serif; padding-top: 17px;
line-height: 0px;">Minor change in membership Rules</h1>
          </td>
           <!-- Optional icon (mandatory, urgent etc) goes in this td -->
          <td style="padding-right:25px; padding-left:25px; width:28px"><img src="[removed due to non disclosure contract]" align="right"></td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- shadow below ribbon -->
  <tr>
    <td colspan="4" style="height:4px;">
<img src="[removed due to non disclosure contract]">
</td>

  </tr>
  <!-- Features,  contained in a nested table -->
  <tr>
    <td style="border-right: 1px solid #e9e9e9; width:3px; "></td>
    <td colspan="2" style="background-color:#fff; border-bottom: 1px solid #e9e9e9;">
      <table style="padding:none; border:none; border-spacing:0;">
        <tr>
          <td colspan="2" style="padding: 10px 25px; font-family: Arial, Helvetica, sans-serif;">
            <h2>Font-family is specified in global styles for each element</h2>
            <img src="[removed due to non disclosure contract]">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie augue ut rutrum interdum. Curabitur varius nisl nec velit dictum feugiat. Nam et augue posuere elit sodales mattis ut nec justo. Etiam auctor rutrum leo in vulputate. Ut eget sem malesuada, consequat ligula id, rutrum lacus. Aenean tempor, magna tincidunt lobortis rutrum, urna arcu mollis diam, nec fermentum arcu mi sed lectus.
          </p>
            <a class="readmore" href="">Read more</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 10px 25px">
            subtitle, image, excerpt, <a>read more</a>
          </td>
          <td style="padding: 10px 25px">
            subtitle, image, excerpt, <a>read more</a>
          </td>
        </tr>


      </table>


    </td>
    <td style="border-left: 1px solid #e9e9e9; width:3px;"></td>
  </tr>
  <!-- optional features -->
</table>
  </body>
</html>

【问题讨论】：

标签： html email templates outlook-2010

【解决方案1】：

我也遇到过类似的问题。

我的img标签是这样的

<img src="http://mydomain/images/myimage.jpg" width="600" height="300" alt="my image"   />

它在所有其他电子邮件客户端中运行良好，但对于 Outlook，我需要包含 www 以使其显示：

<img src="http://www.mydomain/images/myimage.jpg" width="600" height="300" alt="my image" />

【讨论】：

【解决方案2】：

hmmmm 我认为这也会显示图像 :) 只需将 <img src=""> 放入其完整路径 ....

【讨论】：

编辑 - 添加图像。它在 Mail (osx)、gmail、outlook 2007 中正确显示。在 Outlook 2010 中不正确。
我认为这不是您问题中的代码，我认为 Outlook 2010 不支持图像:)

【解决方案3】：

它们对于 html 电子邮件有很多规则。

对于图像，您应该始终放置宽度、高度和 alt 元素

例如：

<img src="http://mydomaine/images/myimage.jpg" width="600" height="300" alt="my image" border="0" style="display:block" />

"display:block" 是 hotmail 用于显示合适大小的图像的 hack。

（顺便说一句，您确定这是您提供的好的 html 代码吗？因为我在您的屏幕截图中看不到第 83 行：“Font-family is specified in global styles for each element”）

【讨论】：