本文介绍了在Gmail电子邮件中删除了Flex/Grid属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个PHP脚本,可以通过邮件发送以下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>

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

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

似乎gmail过滤了这些属性?

It seems that gmail filters those properties ?

这正常吗?

推荐答案

设计HTML电子邮件不同于设计HTML网站.电子邮件客户端和Web浏览器之间存在巨大的技术差距.好像浏览器在不断发展,但是电子邮件客户端陷入了1998年.

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.

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

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.

Gmail剔除CSS3属性也就不足为奇了.最好的选择是坚持表格和内联样式.

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

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

UPDATE: Gmail now supports embedded styles.

更多信息:

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

这篇关于在Gmail电子邮件中删除了Flex/Grid属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-28 08:58