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

Question

我正在改造一个 HTML 电子邮件模板，以便它可以在移动设备上运行。基本上这是一个两列消息，我正在重新排列这些列。 Outlook 有一些条件 cmets，Gmail 有 inline-block 的 div，因为它没有媒体查询，而且效果很好。

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

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

<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>

有很多东西可以从 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