Question

已解决：需要在嵌套在表格中的主图像上声明高度。

问题：我有两张桌子，我试图在一封html电子邮件中叠加在一起，但我们只在Outlook 2016中找到它们之间的差距。红色框应该触摸灰色水平线。见下图。所有其他版本的Outlook都很好。我已经删除了所有表格中的单元格填充，边框和间距，因此我对这个表格感到茫然。我也把这张桌子对齐了。有什么技巧可以让它在2016年MSO中发挥作用？

<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
  <tr>
    <td align="center" width="1">
      <!-- margin SPACER-->
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
      <!-- /margin SPACER-->
    </td>

    <td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
      <table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
        <tr>
          <td align="center">
            <table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
              <tr>
                <td>
                  <a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
                </td>
              </tr>
              <tr>
                <td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
              </tr>
              <tr>
                <td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
              </tr>
            </table>
          </td>
          <td width="1">
            <!-- margin -->
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
              <tr>
                <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
                  <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
                </td>
              </tr>
            </table>
            <!-- /margin -->
          </td>
        </tr>
      </table>

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
  <tr>
    <td style="padding-left: 10px;" height="44">
      <table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
        <tr>
          <td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;"><a href="#" target="_blank" style="color:#ffffff; text-decoration: none; font-weight: normal;">GET QUESTIONS</a></td>
        </tr>
        <tr>
          <td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
            <table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
              <tr>
                <td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;"><a href="#" target="_blank" style="color:#ffffff; text-decoration: none; font-weight: normal;">FOR YOUR DOCTOR</a></td>
                <td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

您是否尝试过使用条件评论？对于Outlook 2016，它应该类似于以下内容：

<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->

仅限Outlook 2016中的html电子邮件表之间的空间

1 个答案: