2013-08-27 26 views
2

編輯:添加圖像。HTML電子郵件地址 - 爲何在使用Outlook 2010打開郵件時不顯示某些元素?

我正在開發一個html電子郵件模板。相當多的心血,汗水和淚水之後,它現在看起來或多或少在郵件客戶端一樣,我們設計了:

enter image description here http://i.imgur.com/aAPcvVv.png

但由於某些原因,Outlook 2010中不會顯示副標題和主要圖像。

enter image description here 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> 

回答

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

哦,我倒認爲,這將顯示圖像,以及:)只是把<img src="">完整路徑....

+0

編輯 - 添加圖片。 它正確顯示在Mail(osx),gmail,outlook 2007.不在Outlook 2010中。 –

+0

我認爲它不是代碼在你的問題其Outlook 2010不支持圖像,我認爲:) – hello

0

他們是一個html這麼多規則電子郵件。

你應該始終把寬度,高度和alt元素

用於爲例圖片:

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

「顯示:塊」是Hotmail的顯示圖像的好尺寸黑客攻擊。

(順便說一句,你確定這是你給了良好的html代碼,因爲我看不到線83在你的屏幕截圖:「FONT-FAMILY在每個元素全局樣式規定」)

相關問題