Gmail 将“position:relative”删除为内联 CSS（电子邮件模板）

Posted 2023-03-15

【中文标题】Gmail 将“position:relative”删除为内联 CSS（电子邮件模板）

【英文标题】：Gmail removes "position:relative" as inline CSS (Email Template)

【发布时间】：2014-02-02 18:42:55

【问题描述】：

据我了解，Gmail 根本不接受头部的 CSS 块，这就是为什么我一直在我的电子邮件模板中添加一堆内联 CSS 以使其正常工作。

但是，我在 CSS 定位属性上苦苦挣扎。我希望图像位于背景图像之上，因此我将两者的父 div 设置为 position: relative 并将图像设置为绝对值。但是，出于某种原因，Gmail 从 div 中删除了声明 position: relative 的样式属性。它保留了所有其他内联 CSS。

有什么想法吗？有什么解决方法吗？

【问题讨论】：

CSS position 在 html 电子邮件中没有得到很好的支持。对于背景图像，您应该查看 backgrounds.cm。然后，您可以在内部 <td> 中放置一个普通图像标签。

【参考方案1】：

遗憾的是，我怀疑您在设计电子邮件时可能不得不放弃对 div 和定位的完全合理的想法。电子邮件客户端中的 CSS 支持是一场纠结的噩梦。

在电子邮件上强制布局的唯一（相对）可靠的方法是使用老式的表格布局，这是不幸的，但不可避免。

Campaign Monitor 对电子邮件客户端 CSS 支持 here 进行了出色的总结。

【讨论】：

尽管很糟糕，嵌套表格是创建 HTML 新闻通讯的唯一方法。高级 CSS 也是不可能的。

谢谢两位！我现在使用表格，将背景图像添加到 td 标记并将我的叠加图像放置在表格数据中。不漂亮，但它有效！ :)

【参考方案2】：

我在发送电子邮件简报时遇到了类似的布局问题。解决方案是使用表格来正确定位东西。它已经过时了，但我认为这是让事情看起来像他们应该的样子的唯一方法。