2

我的应用程序向用户发送了一封 HTML 电子邮件。当我将它作为纯 HTML 文件进行测试时，它在各种浏览器（Firefox、IE、Chrome、Safari、Android 手机浏览器）中看起来都不错。它还在我测试过的网络邮件客户端（Gmail、雅虎邮件）中显示良好。

但是当我在 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>
4

2 回答 2

2

您可能需要对 html 电子邮件设计进行更多研究。它与 web 的 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>

电子邮件设计资源的几个很好的介绍：

于 2013-09-04T19:37:19.003 回答
1

你真的应该使用响应式技术来构建你的电子邮件。这是描述该方法的一篇非常好的文章：http: //blog.booking.com/responsive-email.html

于 2013-09-04T19:48:01.110 回答