HTML布局在Microsoft Outlook電子郵件客戶端中被弄亂了

Question

我的應用程序將HTML電子郵件發送給用戶。 當我將其作為純HTML文件進行測試時，在各種瀏覽器（Firefox，IE，Chrome，Safari，Android手機瀏覽器）中看起來都可以。 在我測試過的Webmail客戶端（Gmail，Yahoo郵件）中，它也可以正常顯示。

但是，當我在Microsoft Outlook中查看消息時，布局混亂了。 具體來說-右手圖標不是頂部對齊的，但是顯示的位置遠低於左手圖標。 這是HTML代碼：

<div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF">
   <!-- Logos -->
       <div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px">
           <a href="http://mywebsite.com" target="_blank" style="color: #333; "><img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0"></a>
           <a href="mailto:?subject='.$email_subject.'&body='.$email_body.'" style="color: #333"><img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0"></a>
       </div>
   <!-- Title -->
       <div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;">
           <span style="font-size:12px; padding-left: 2px; font-weight: bold;">Comment line - should be left aligned</span>
       </div>
       <div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;">
           <span><b>My Title Should Be Centered</b></span>
      </div>
   </div>

Answer 1

您可能需要對html電子郵件設計進行更多研究。 它與網絡上的html不同，應該基於表格而不是基於div。 這是示例代碼的外觀的基本示例：

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left">
            <a href=""><img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="30px" height="10px" alt="Logo"></a>
          </td>
        </tr>
        <tr>
          <td align="left" style="font-size:12px; padding-left: 2px; font-weight: bold; color:#DDDDDD;">
            Comment line - should be left aligned
          </td>
        </tr>
      </table>
    </td>
    <td align="right" valign="top">
      <a href="mailto:?subject='.$email_subject.'&body='.$email_body.'"><img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="120px" height="27px" alt="recommend"></a>
    </td>
  </tr>
  <tr>
    <td align="center" colspan="2" style="text-transform: uppercase; color: #DDDDDD; font-size: 12px; font-weight: bold;">
      My Title Should Be Centered
    </td>
  </tr>
</table>

電子郵件設計資源的一些不錯的介紹：

• 廣告活動監控
• 在線吸引客戶

Answer 2

您實際上也應該使用響應技術來構建電子郵件。 這是一篇很好的文章，介紹了該方法： http : //blog.booking.com/sensitive-email.html