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

2021-12-31 00:00:00 gmail php css flexbox css-grid

我有一个 PHP 脚本，它通过邮件发送以下 HTML :

<身体><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 通知.</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>
<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 时)没有显示属性 flex-direction: column;

似乎 gmail 过滤了这些属性?

这正常吗?

解决方案

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

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

Gmail 去除 CSS3 属性并不奇怪.最好的办法是坚持使用表格和内联样式.

<小时>

更新:Gmail 现在支持嵌入样式.

<小时>

更多信息:

  • HTML 电子邮件中的 CSS
  • 设置 HTML 电子邮件样式的最佳做法
  • 最佳实践编写 HTML 电子邮件时的注意事项

I have a script in PHP that sends the following HTML by mail :

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

But the email received (when I inspect the main div) doesn't show the property flex-direction: column;

It seems that gmail filters those properties ?

Is this normal ?

解决方案

Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.

In the world of HTML e-mail, embedded and external styles are bad, CSS3 is bad, JavaScript is bad, while.. inline styles and tables for layout are good. In this world, old-school coding methods are alive and well.

It's not surprising that Gmail will strip out CSS3 properties. Your best bet is to stick to tables and inline styles.

UPDATE: Gmail now supports embedded styles.

More information:

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

相关文章