HTML電子郵件-使用Outlook 2010打開郵件時，為什么某些元素不顯示？

Question

編輯：添加圖像。

我正在開發一個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>

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

Answer 2

嗯，我想這也將顯示圖像:)只需將<img src="">其完整路徑放入...。

Answer 3

對於HTML電子郵件，它們有很多規則。

對於圖像，您應該始終放置width，height和alt元素

舉個例子：

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

“ display：block”是用於hotmail的黑客程序，用於顯示圖像的合適大小。

（順便說一句，您確定這是您提供的很好的html代碼嗎？因為在您的屏幕截圖中看不到第83行：“為每個元素以全局樣式指定了字體家族”）

HTML電子郵件-使用Outlook 2010打開郵件時，為什么某些元素不顯示？

問題描述

3 個解決方案

解決方案1
1 已采納 2013-10-23 07:57:53

解決方案2
0 2013-08-27 09:05:44

解決方案3
0 2013-08-27 10:14:27

HTML電子郵件-使用Outlook 2010打開郵件時，為什么某些元素不顯示？

問題描述

3 個解決方案

解決方案1 1 已采納 2013-10-23 07:57:53

解決方案2 0 2013-08-27 09:05:44

解決方案3 0 2013-08-27 10:14:27

解決方案1
1 已采納 2013-10-23 07:57:53

解決方案2
0 2013-08-27 09:05:44

解決方案3
0 2013-08-27 10:14:27