html - 有没有办法阻止 Outlook 破坏 的填充

Question

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

我使用了一个标签以及一些样式来在内容 block 中的文本周围添加填充。在大多数电子邮件客户端(gmail、safari)中，它看起来不错。只有 Outlook 会打破填充并使文本粘在内容 block 的边缘。

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

我使用的代码粘贴在下面:

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

我希望在文本周围看到 20 像素的填充，它确实在 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>