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