4

我知道这是一个常见问题，我一直在寻找解决方案。我遇到的一切，我都试过了。如果我还有头发，我会把它拔掉。

我有一张包含一系列要点的表格。该表的问题在于，每当我创建新行时，Outlook 都会决定在每行下方添加额外的间距，从而使我的表看起来比应有的更大。

<style type="text/css">
  .ExternalClass table, .ExternalClass tr, .ExternalClass td {line-height: 100%;}
</style>

<table width="400" align="left" cellpadding="0" cellspacing="0" border="0">
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
</table>

我尝试过但不起作用的事情：

border-collapse:collapse

display:block

display:inline-block

float:left

4

2 回答 2

5

删除<p>标签，邮件客户端并不总是尊重这些标签的样式，之后他们会自动添加额外的换行符。

您可以用 if 需要替换<p>，<span>因为<span>没有任何“免费”填充。

于 2013-06-13T16:27:25.170 回答
2

Outlook.com 添加了覆盖行高的嵌入式 CSS，Outlook 和 Outlook.com 都不能<p>很好地支持边距，如果有的话：我<p>在一个在线论坛（我认为是 Campaign Monitor）中找到了标签提示，但我永远无法让它始终如一地工作：

HTML/内联 CSS：

<p style="margin-bottom:0;margin:0 0 1em;padding:0;">some text here</p>


这样做可以解决问题

要覆盖 Outlook.com 行高，请执行以下操作：


嵌入式 CSS：

.ExternalClass * { line-height:105%; }


为了在所有电子邮件客户端/用户代理中保持一致的填充/边距，我对容器使用<span>标签和填充（无边距属性） ：<td>


HTML/内联 CSS

<td class="classname" style="padding-bottom: 3px; font-family: Arial, sans-serif; font-size: 13px; mso-line-height-rule: exactly; line-height: 15px;">
  Text Goes Here
</td>


注意：我在支持的情况下为响应式设计添加了一个类名。

注意：我找到mso-line-height-rule: exactly了 Outlook 2003/2007/2010/2013。它仅在用于块级元素时才有效，并且它必须列为 line-height 之前的第一个属性（如上例所示）。


一般提示：

  • 如果可能，将所有内联样式添加到块级标签。
  • 将标题和随后的相关内容放在单独的表格行中，以便我可以<td>在标题的包含内容中添加填充。它可能有点过分，但它比我发现的任何其他东西都能让你更好地控制间距。


HTML/内联 CSS：

<tr>
  <td class="introHead" style="padding-bottom:3px;color:#000000;font-family:Arial;font-size:16px;">
    Heading goes here
  </td>
</tr>
<tr>
  <td class="introCopy" style="color:#000000;font-family:Arial;font-size:16px;">
    This is the body of the text, Lorem Ipsum yadda yadda.
  </td>
</tr>
于 2014-07-25T20:54:50.270 回答