Question

我的应用程序向用户发送HTML电子邮件。当我将其作为纯HTML文件进行测试时，它在各种浏览器（Firefox，IE，Chrome，Safari，Android手机浏览器）中看起来都不错。它在我测试的网络邮件客户端（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/responsive-email.html

HTML布局在Microsoft Outlook电子邮件客户端中搞砸了

2 个答案: