html - Outlook 2007/2010 中的 Vspace

Question

我有一个适用于大多数电子邮件运营商的 html 时事通讯，但格式在 Outlook 中被弄乱了。我在图像标签上放置了 vspace="10" 以在图像的顶部和底部放置 10px 的边距，以便在图像和其下方的文本之间留出空间。但是，在 Outlook 中，没有拾取 vspace，文本直接显示在图像下方，中间没有空格。

有谁知道如何让它工作？我试图在图像上放置 10px 的边距底部，但这同样不起作用。

Answer 1

使用嵌套表并将行高定义为 10px 可能更容易。您在 Outlook 2007+ 中遇到的问题是 Word HTML 渲染，它以自己的特殊方式处理 CSS。

Answer 2

使用 HTML 电子邮件，不同浏览器之间存在许多细微差别。我从创建电子邮件中学到的一件事是它需要非常简单。Outlook 不支持边距和填充（由于它使用文字渲染引擎）。

解决方案

将图像和空间替换为包含 2 个间隔 gif 和中间图像的表格。例如（您需要使用图像的绝对路径）：

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" border="0" src="YOUR IMAGE" width="" height="" />
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
    </td>
  </tr>
</table>