我用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对内联样式的支持非常差。这里(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>

关于html - 有没有一种方法可以阻止Outlook破坏<div>的填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54648487/

10-11 22:31
查看更多