Question

除了Outlook 2013 + 2016之外，我的电子邮件看起来很棒。在我的最终表格行的顶部似乎有额外的填充。

这是我的代码。图像的高度为10px，看起来桌子顶部有10px的填充。

你可以看到上面的粉红色（ish）行。

这是我的代码。有什么想法吗？

 <table width="600" align="center" cellspacing="0" cellpadding="0" style="padding: 0 !important;margin: 0 !important; background-color: #ed5d98;" bgcolor="#ed5d98">
      <tr>
        <td>
          <table width="600" cellspacing="0" border="0" cellpadding="0" align="center style="width: 600px !important; mso-line-height-rule:exactly">
            <tr>
              <td width="600" valign="bottom" style="width: 600px !important;background-color: #fff mso-line-height-rule:exactly;" bgcolor="#fff">
                <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" />
              </td>
            </tr>
          </table>
      </td>
    </tr>
  </table>

Answer 1

您可以尝试几种方法。首先将border =“0”添加到图像，您还可以将图像包装在div中，并将内嵌css高度设置为图像。此外，您可以向左或向右对齐图像（取决于布局），还可以向图像添加内嵌边距：0px。

Answer 2

你有mso-line-height-rule：完全符合你的风格，但没有指定行高或字体大小，因此Outlook会假设像15px。尝试添加font-size：0; line-height：1px;你的TD风格。这通常是Outlook 2013的诀窍。

Answer 3

这应该有效：

<table width="600" align="center" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ed5d98">
            <table width="100%" cellspacing="0" border="0" cellpadding="0" align="center">
                <tr>
                    <td width="100%" valign="bottom" style="font-size: 0; mso-line-height-rule: exactly; line-height: 0;" bgcolor="#ffffff">
                        <img width="600" src="https://eoa-editor.s3.amazonaws.com/f90c5762a5514d4fa25ece7946c98bfd37feee58%2Fframe.png" alt"" style="display: block;">
                    </td>
               </tr>
            </table>
        </td>
    </tr>
</table>

将font-size: 0; mso-line-height-rule: exactly; line-height: 0;添加到<td>以强制执行确切的行高
将display: block;添加到<img>以取消额外的行高
从<table>和<td> s

2013年额外填充展望

3 个答案: