Question

我们有一个wysisyg编辑器，用户可以在其中编写电子邮件内容并点击发送，因此我们需要HTML尽可能干净。 E.g：

<p><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</p>

<p>Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</p>

问题是Outlook已经放弃了对边距/填充的支持，因此唯一的方法是将内容创建为：

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 20px 0; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px;  line-height: 18px;"><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td style="padding: 20px 0; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px;  line-height: 18px;">Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</td>
</tr>
</table>

所以我的问题是我最好不要尝试;

编辑wysisyg，使其生成表而不是段落默认。首先要看看它几乎是不可能的。

或者另一个想法是在发送之前自动编辑HTML源代码，可能会检查2个段落并在其间插入空格表，例如

 <p><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</p>

 <!--[if mso]>
 <table cellpadding="0" cellspacing="0" width="100%"><tr><td height="20">&nbsp;</td></tr></table>
 <![endif]-->

 <p>Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</p>

我可能更喜欢这种方法，所以下一个问题是我最好将此修复程序仅应用于Outlook，如上所示，或将此应用于所有添加<p style="margin:0; padding:0;">。

Answer 1

对于HTML电子邮件，一切都应该在表格中。话虽这么说，你可以将你所见即所得的内容插入预先存在的<td>，你应该好好去。

我知道至少有一家主要的电子邮件服务提供商在其所见即所得中使用<p>个标签。请尝试将其添加到您的<style>代码：

#outlook a {padding:0;}

我个人不喜欢html中的<p>标签。上面的样式代码可以解决问题，但我没有费心去检查，因为我发现双<br>更容易/更快。

以下是垂直间距的3种常用技术：

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>

&nbsp;<br>      <!-- Some clients will collapse empty rows, so &nbsp; is needed -->
Content here
<br><br>
More content here
<br>&nbsp;


    </td>
  </tr>
</table>

OR

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td style="padding-top:20px; padding-bottom:20px;">

Content here
<br><br>
More content here

    </td>
  </tr>
</table>

OR

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td height="20">&nbsp;   <!-- Some clients will collapse empty rows, so &nbsp; is needed -->
    </td>
  </tr>
  <tr>
    <td>

Content here
<br><br>
More content here

    </td>
  </tr>
  <tr>
    <td height="20">&nbsp;
    </td>
  </tr>
</table>

Outlook HTML电子邮件边距

1 个答案: