在Gmail电子邮件中删除了Flex/Grid属性 [英] Flex / Grid 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网站.电子邮件客户端和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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
