1

我对正在发生的事情感到困惑，所以我认为 SO 可能会提供帮助。我有一封 HTML 电子邮件，除了几个项目符号外，一切看起来都很好。

这是它在 Outlook、AOL、GMail 中的外观：在此处输入图像描述

这是它在雅虎中的样子：在此处输入图像描述

更新 我已经text-align为标签添加了值<p>，但结果保持不变。

这是我的代码：

<table>
  <tbody>
    <tr>
      <td width="16" align="left" valign="top">
        <img src="images/spacer.gif" style="outline: none; border: none;" alt=" " width="16" height="5" />
      </td>
      <td width="10" align="right" valign="top" style="color: #231F20;">
        <p style="margin: -20px 0px 10px 0px; font-size: 11px; color: #231F20; text-align:right;">*</p>
      </td>
      <td width="492" align="left" valign="top" style="color: #231F20; font-size: 12px; padding-bottom: 4px;">
        <p style="margin: -20px 0px 10px 0px; font-size: 11px; text-align:left;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </td>
    </tr>

    <tr>
      <td width="16" align="left" valign="top">
        <img src="images/spacer.gif" style="outline: none; border: none;" alt=" " width="16" height="5" />
      </td>
      <td width="10" align="right" valign="top" style="color: #231F20;">
        <p style="margin: 0px 0px 0px 0px; font-size: 11px; color: #231F20; text-align:right;"><sup>&dagger;</sup></p>
      </td>
      <td width="492" align="left" valign="top" style="color: #231F20; font-size: 12px; padding-bottom: 4px;">
        <p style="margin: 0px 0px 0px 0px; font-size: 11px; text-align:left;;">
          Pellentesque ipsum sem, venenatis a condimentum vitae, gravida vel neque. Suspendisse placerat sapien in leo eleifend porta. Donec ut augue vel felis condimentum aliquet. Curabitur luctus, nunc vel blandit elementum, ante lacus facilisis nulla, ac tincidunt massa quam in eros. Nulla facilisi.
        </p>
      </td>
    </tr>
  </tbody>
</table>

如果您有任何问题，请告诉我。我不知道是怎么回事。通常 Outlook 是最难处理的问题，而不是 Yahoo。

4

3 回答 3

1

您不应该在 HTML 电子邮件中使用边距。它在支持/一致性方面参差不齐，Outlook.com 根本不支持它。而是在容器表格单元格上使用填充。

编辑：在这种情况下，您实际上都不需要。您还可以丢失间隔图像和 tbody 标签：

<table>
    <tr>
      <td width="26" align="right" valign="top">&bull;&nbsp;
      </td>
      <td width="492" align="left" valign="top" style="color: #231F20;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;
      </td>
    </tr>
    <tr>
      <td width="26" align="right" valign="top">&dagger;&nbsp;
      </td>
      <td width="492" align="left" valign="top" style="color: #231F20;">
          Pellentesque ipsum sem, venenatis a condimentum vitae, gravida vel neque. Suspendisse placerat sapien in leo eleifend porta. Donec ut augue vel felis condimentum aliquet. Curabitur luctus, nunc vel blandit elementum, ante lacus facilisis nulla, ac tincidunt massa quam in eros. Nulla facilisi.
      </td>
    </tr>
</table>
于 2013-05-23T20:32:40.300 回答
0

如果你<p style="margin: -20px 0px 10px 0px; font-size: 11px">改成

<p style="margin: 0px 0px 10px 0px; font-size: 11px">

在

<p style="margin: -20px 0px 10px 0px; font-size: 11px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
于 2013-05-23T19:42:02.700 回答
0

不仅仅是雅虎！展望也

这篇最近的文章 [1/29/2013] 值得一读

Outlook.com 完全放弃保证金和浮动支持

基本上他们没有找到margin支持的解决方法，并建议返回<table>或在某些情况下只是padding.

我们还建议回到根目录并尽可能使用表格单元格以及 cellpadding 和 cellspacing 属性。这些是真正防弹的 HTML 电子邮件布局的基石。

于 2013-06-22T22:24:48.343 回答