我有一个 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 似乎过滤了这些属性?
这是正常的吗?
设计 HTML 电子邮件与设计 HTML 网站不同。电子邮件客户端和网络浏览器之间存在巨大的技术差距。就好像浏览器在不断发展,但电子邮件客户端却停留在 1998 年。
在 HTML 电子邮件的世界中:
- 嵌入式和外部风格都不好,
- CSS3 很糟糕,
- JavaScript 很糟糕,
while...内联样式和表格都很好。
在 HTML 电子邮件领域,老式的布局方法是最可靠的。因此,Gmail 删除 CSS3 属性也就不足为奇了。最好的选择是坚持使用表格和内联样式。
UPDATE: Gmail 现在支持嵌入样式。 https://developers.google.com/gmail/design/css
更多信息:
- HTML 电子邮件中的 CSS http://kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email
- HTML 电子邮件样式的最佳实践 https://stackoverflow.com/q/4829254/3597276
- 编写 HTML 电子邮件时的最佳实践和注意事项 https://stackoverflow.com/q/2229822/3597276
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)