Flex / Grid 属性在 gmail 电子邮件中被删除

Posted 2023-02-24

技术标签:

【中文标题】Flex / Grid 属性在 gmail 电子邮件中被删除【英文标题】：Flex / Grid properties are deleted in gmail email 【发布时间】：2017-01-15 13:07:09 【问题描述】：

我有一个 php 脚本，它通过邮件发送以下 html：

<html class="no-js" lang="en">
   <body>
      <div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">

        <h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>

        <div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
            <p style="color:white;margin: auto;text-align: center;">$notification</p>
        </div>

        <a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
      </div>
   </body>
</html>

但收到的电子邮件（当我检查主 div 时）没有显示属性 flex-direction: column;

似乎 gmail 过滤了这些属性？

这正常吗？

【问题讨论】：

【参考方案1】：

设计 HTML 电子邮件与设计 HTML 网站不同。电子邮件客户端和网络浏览器之间存在巨大的技术差距。好像浏览器在不断发展，但电子邮件客户端却停留在 1998 年。

在 HTML 电子邮件的世界中，嵌入式和外部样式很糟糕，CSS3 很糟糕，javascript 很糟糕，而.. 内联样式和布局表格很好。在这个世界上，老式的编码方法仍然存在并且很好。

Gmail 将去掉 CSS3 属性也就不足为奇了。最好的办法是坚持使用表格和内联样式。

更新：Gmail now supports embedded styles.

更多信息：

CSS in HTML Email Best practices for styling HTML emails Best Practices & Considerations when writing HTML Emails

【讨论】：