弹出框属性在Gmail邮件中被删除 [英] Flex-box properties are deleted in gmail email
问题描述
我在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网站。电子邮件客户端和网络浏览器之间存在巨大的技术差距。
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.
更多信息：
- HTML电子邮件中的CSS >
- HTML电子邮件样式的最佳做法
- < a href =http://stackoverflow.com/q/2229822/3597276>最佳做法&编写HTML电子邮件时的注意事项
- CSS in HTML Email
- Best practices for styling HTML emails
- Best Practices & Considerations when writing HTML Emails
这篇关于弹出框属性在Gmail邮件中被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
