CSS styles 在邮件正文中 Gmail

Question

有谁知道或可以确认 Gmail 是否从邮件正文中删除了样式块？ 他们声称允许在 HTML 正文中使用样式标签。 但是，在我的测试中，主体中的样式标签已从 Gmail 中删除。我用这个 HTML 进行了测试，仅应用了头部样式。

 <html> <head> <style> h1{color:red;} </style> </head> <body> <h2>Hi from H2-1</h2> <style>h2{color:green;}</style> <h1>Hi from H1</h1> <h2>Hi from H2-2</h2> </body> </html>

Gmail-CSS-失败

Answer 1

您必须为几乎所有主要的电子邮件提供商执行所有内联样式。

<h2 style="color: #ff00ff;">H2 Title</h2>

<p style="color: #fff; padding: 10px 0; text-align: center;">This is a paragraph section.</p>

Answer 2

通常，使用html电子邮件是一个巨大的痛苦。 我只建议您通过某些预邮程序运行html，例如： http ://premailer.dialect.ca/。 应该注意内联所有样式。 在电子邮件领域没有简单的答案，那里仍然是2000年。

Answer 3

根据我的简单测试，如果您在内联 styles 中使用CSS 中的无逗号颜色函数，整个style属性将从该元素中删除。

这个HTML

<span style="background-color:rgb(239 68 68 /  1);color:rgb(255 255 255 / 1 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with slash without comma </span>

<span style="background-color:rgb(239 68 68 );color:rgb(255 255 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> without slash without comma </span>

<span style="background-color:rgb(239, 68, 68);color:rgb(255, 255, 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with commas </span>

在 Thunderbird 中看起来像这样：

在 gmail（网络邮件）中像这样：

如果使用 postcss， postcss-preset-env应该有帮助。

CSS styles 在邮件正文中 Gmail

问题描述

3 个解决方案

解决方案1
2 2017-03-06 14:33:12

解决方案2
0 2017-03-06 14:45:34

解决方案3
0 2022-06-20 19:10:39

CSS styles 在邮件正文中 Gmail

问题描述

3 个解决方案

解决方案1 2 2017-03-06 14:33:12

解决方案2 0 2017-03-06 14:45:34

解决方案3 0 2022-06-20 19:10:39

解决方案1
2 2017-03-06 14:33:12

解决方案2
0 2017-03-06 14:45:34

解决方案3
0 2022-06-20 19:10:39