CSS styles 在邮件正文中 Gmail
[英]CSS styles in mail body in Gmail
问题描述
Does anyone know or can confirm if Gmail strips out style blocks from the mail body?
有谁知道或可以确认 Gmail 是否从邮件正文中删除了样式块？ They claim to allow style tags in the HTML body.他们声称允许在 HTML 正文中使用样式标签。 However, in my tests style tags in the body were removed from Gmail. I tested with this HTML, only the head style got applied.但是，在我的测试中，主体中的样式标签已从 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>
3 个解决方案
解决方案1
2 2017-03-06 14:33:12
You have to do all inline styles for almost all major email providers. 您必须为几乎所有主要的电子邮件提供商执行所有内联样式。
<h2 style="color: #ff00ff;">H2 Title</h2>
<p style="color: #fff; padding: 10px 0; text-align: center;">This is a paragraph section.</p>
解决方案2
0 2017-03-06 14:45:34
Generally, working with html email is a massive pain. 通常，使用html电子邮件是一个巨大的痛苦。 All I can recommend you is to just run your html through some premailer, like: http://premailer.dialect.ca/ . 我只建议您通过某些预邮程序运行html，例如： http ://premailer.dialect.ca/。 It should take care of inlining all styles. 应该注意内联所有样式。 There are no easy answers in the email land, it's still year 2000 there. 在电子邮件领域没有简单的答案，那里仍然是2000年。
解决方案3
0 2022-06-20 19:10:39
From my simple test, if you use No-Comma Color Functions in CSS in your inline styles the whole style attribute will get stripped from that element.根据我的简单测试，如果您在内联 styles 中使用CSS 中的无逗号颜色函数，整个style属性将从该元素中删除。
This HTML这个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>
Looks like this in Thunderbird:在 Thunderbird 中看起来像这样：
And like this in gmail (webmail):在 gmail（网络邮件）中像这样：
If using postcss, postcss-preset-env should help.如果使用 postcss， postcss-preset-env应该有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.