Yahoo Mail正在调整HTML电子邮件中的边距

Question

我对发生的事情感到困惑所以我认为S.O.也许可以提供帮助。我有一个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是难以应对的，而不是雅虎。

Answer 1

您不应在HTML电子邮件中使用保证金。支持/一致性不完整，Outlook.com根本不支持它。而是在容器表格单元格上使用填充。

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

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

Answer 2

如果您将<p style="margin: -20px 0px 10px 0px; font-size: 11px">更改为

，该怎么办？

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

at

<p style="margin: -20px 0px 10px 0px; font-size: 11px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Answer 3

这不仅仅是雅虎！展望太

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

Outlook.com drops margin and float support entirely

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

  

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