Question

我正在改进HTML电子邮件模板，以便它可以在移动设备上运行。基本上它是一个两列消息，我正在回复列。对于Outlook有一些条件评论，对于Gmail有inline-block的div，因为它没有媒体查询，而且效果相当不错。

我无法解决的一个问题是在标题中。它有一个徽标图像，旁边有一个日期，下面还有一个边框。边框需要位于徽标图像的最底部，但Windows上的Outlook 2010和2013（Mac上的Outlook 2011，以及outlook.com和Office 365以及每个非Outlook客户端都很好）在它们之间放置了一个空格

这是我用于标题的HTML，特别是。我已经包含了包装元素，但没有包含其他内容。

＆＃13;

<center style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; table-layout: fixed; width: 100%">
    <div>
      
      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center">
          <tr>
            <td>
            <![endif]-->
        <table align="center" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0 auto; max-width: 600px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100%">
          <tr>
            <td style="border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 10px; border-collapse: collapse; font-size: 0; Margin: 0; padding: 0; text-align: center" align="center">
            <!--[if (gte mso 9)|(IE)]>
            <table width="100%">
              <tr>
                <td width="50%" valign="bottom">
            <![endif]-->
              <div style="display: inline-block; Margin-right: 0; max-width: 390px; vertical-align: bottom; width: 100%">
                <table width="100%" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0">
                  <tr>
                    <td style="border-collapse: collapse; font-size: 0; height: 90px; line-height: 0px; Margin: 0; padding: 0; vertical-align: bottom" valign="bottom">
                      <table style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; text-align: left; width: 100%">
                        <tr>
                          <td style="border-collapse: collapse; font-size: 0; height: 90px; line-height: 0px; Margin: 0; padding: 0; vertical-align: bottom" valign="bottom">
                            <a href="browserversion" style="color: #1A1818; text-decoration: none"><img src="logo" alt="alt text" width="390" height="90" align="left" style="border: 0 none; display: block; height: auto; line-height: 100%; Margin: 0; max-height: 90px; max-width: 390px; outline: none; padding: 0; text-decoration: none; vertical-align: bottom; width: 100%" /></a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            <!--[if (gte mso 9)|(IE)]>
                  </td><td width="50%" valign="bottom">
            <![endif]-->
              <div style="display: inline-block; Margin-right: 0; max-width: 210px; vertical-align: bottom; width: 100%">
                <table width="100%" style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0">
                  <tr>
                    <td style="border-collapse: collapse; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; font-weight: bold; height: 90px; line-height: 100%; Margin: 0; padding: 10px 0 5px; text-align: right; vertical-align: bottom; width: 100%" align="right" valign="bottom">
                      <table style="border-collapse: collapse; border-spacing: 0; color: #1a1818; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; Margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; text-align: left; width: 100%">
                        <tr>
                          <td style="border-collapse: collapse; font-family: Helvetica, Arial, Geneva, sans-serif; font-size: 16px; font-weight: bold; height: 90px; line-height: 100%; Margin: 0; padding: 10px 0 5px; text-align: right; vertical-align: bottom; width: 100%" align="right" valign="bottom">
                            September 25, 2015
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
            <![endif]-->
            </td> <!-- end .two-column.header -->
          </tr> <!-- end row -->
        </table> <!-- end .outer -->
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
      <![endif]-->

    </div>
  </center>

  </body>
</html>

＆＃13;

有很多东西要从Outlook中删除图像中的空间，我已经实现了我能找到的所有内容，但到目前为止还没有运气。这是Outlook中出现的问题的屏幕截图。

Answer 1

我终于找到了解决方法。我将这些样式添加到标题中（因此未注释掉的第一个td需要标题类）：

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
.header table { font-size:1px; line-height:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->

此解决方案可在此处找到：http://www.optimisedemail.com/2013/05/the-weekly-fix-outlook-2013-spacing.html

Outlook在徽标图像下方添加了一个空格

1 个答案: