Gmail 更改内联样式

Question

我正在 MailChimp 中创建一个自定义模板，所有样式都是内联的，但是当我发送预览时，Gmail 要么不显示这些样式，要么更改它们。

例如：

<span style="display: inline-block;width: 35px;height:4px;background-color: #ff4229;">&nbsp;</span>

Gmail 将呈现为：

<span style="display:inline-block;width:35px;min-height:4px;background-color:#ff4229;"> </span>

有人知道为什么会这样吗？ 谢谢！

编辑： 我在内联样式中添加了 max-height，现在可以了。

Answer 1

问题可能源于很多方面，但很可能是由 Gmail 的预处理器完成的，以确保在其电子邮件客户端中显示是安全的。基本上，这意味着它会对 HTML/CSS 进行更改，这可能会导致其电子邮件客户端上使用的 HTML/CSS 出现问题（无论是显示还是安全性）。

除此之外，电子邮件在发送到收件人收件箱的过程中可能有上百万种不同的读取和编辑方式。

有关此过程的更多信息，请参阅下面的链接：

https://litmus.com/blog/why-do-email-clients-render-emails-differently?utm_campaign=industry&utm_source=litmusblog&utm_medium=blog

https://litmus.com/blog/why-email-designs-break-rendering-guide-infographic?utm_campaign=industry&utm_source=litmusblog&utm_medium=blogs-break-rendering-guide-infographic

https://litmus.com/blog/webmail-rendering-explained-why-preprocessors-are-the-enemy

此外，对于大多数电子邮件客户端，跨度不接受高度、宽度、显示和背景颜色。由于支持参差不齐，甚至有一些关于在电子邮件中使用 DIV 标签的争论。您将需要将表格用于大多数这些目的。有关 HTML 电子邮件布局的一些链接，请参见下文：

https://www.campaignmonitor.com/blog/email-marketing/2011/05/div-tags-in-html-email-newsletters/

HTML email: tables or divs?