Question

我已经用Mailchimp构建了一个电子邮件模板，该模板使用了自定义代码块。我用它来自动删除标题图像和内容块之间的填充，图像和内容之间的块Mailchimp。

我使用了标记以及一些样式来在内容块中的文本周围添加填充。在大多数电子邮件客户端（gmail，safari）中，它看起来不错。只有Outlook会中断填充，并使文本停留在内容块的边缘。

我尝试在标签周围添加表格，但这似乎不起作用。

我正在使用的代码粘贴在下面：

<div class="mcnTextContent" style="background-color: #b3daf0; padding: 20px;">
<h1 style="color: #000000; text-align: left; font-size: 18pt; font-family: Tahoma, Open Sans;">Hallo!</h1>
<p style="color: #000000; text-align: left; font-size: 11pt; font-family: Tahoma, Open Sans;">Op zoek naar de beste deal? Snuffel dan even rond in onze Online Outlet! Met kortingscode FIETSOUTLET krijg je in je winkelmand namelijk nog eens <b>10% extra korting</b> op <a ><br>
</div>

我希望在文字周围看到20px的空白，并以gmail显示。但不是在Outlook中。

Answer 1

Outlook对内联样式的支持非常差。这里（https://css-tricks.com/using-css-in-html-emails-the-real-story/和这里（https://templates.mailchimp.com/development/css/outlook-conditional-css/）的TL; DR有一些有用的信息：使用基于表的布局以保持一致性。

我知道这太可怕了。 ;（

<table class="mcnTextContent" cellpadding="20">
  <tr>
    <td bgcolor="#b3daf0">
      <h1 style="color: #000000; text-align: left; font-size: 18pt; font-family: Tahoma, Open Sans;">Hallo!</h1>
      <p style="color: #000000; text-align: left; font-size: 11pt; font-family: Tahoma, Open Sans;">Op zoek naar de beste deal? Snuffel dan even rond in onze Online Outlet! Met kortingscode FIETSOUTLET krijg je in je winkelmand namelijk nog eens <b>10% extra korting</b> op
        <p>
    </td>
  </tr>
</table>

有没有一种方法可以阻止Outlook破坏<div>的填充

1 个答案: