不同的电子邮件客户端和不同的阅读格式如何处理电子邮件中的 CSS？

Posted 2023-03-15

【中文标题】不同的电子邮件客户端和不同的阅读格式如何处理电子邮件中的 CSS？

【英文标题】：How is CSS in emails treated by different email clients and in different reading formats?

【发布时间】：2021-04-12 17:17:53

【问题描述】：

我目前正在自定义我的第一个（woocommerce）电子邮件模板，我想通过 CSS display: none隐藏数据

但是，我想知道 CSS 和 display: none 的支持是什么，即

是否所有电子邮件客户端都支持基本的 CSS，例如 display: none 还是太多了？ 如果收件人仅查看文本格式（而非 html）的电子邮件，会发生什么情况？电子邮件客户端是否将 HTML 转换为文本（即 display: none 仍未显示）或者电子邮件客户端是否只是输出了它可以找到的纯文本而无需 HTML 转换（即 display: none 内容仍然显示）？ 是否有网站可以测试电子邮件在电子邮件客户端（outlook、gmail、yahoo、spark、mac 等）中的外观？

我知道这可能是非常基本的，但我真的很感激任何帮助！

非常感谢

更新：

这个网站提供了一些关于隐藏元素的细节：http://www.emaildesignreview.com/email-code/hiding-elements-in-email-4922/

我目前正在使用以下方法来尝试隐藏尽可能多的客户端：

font-size: 0; /* in case display-none isnt working */
max-height:0px; overflow:hidden; /* for gmail */
opacity: 0;
visibility: hidden;
display: none; 
mso-hide: all; /* for outlook */ 

【参考方案1】：

您可以在Can I email 上查看电子邮件客户端如何支持display:none。 （免责声明：我是网站的维护者。）

HTML 和纯文本是电子邮件的两个不同版本。您可以发送两个版本并确保内容相关。从我所拥有的 WooCommerce 中看到，使用 Storefront 主题，默认设置为仅发送 text/html。您可以更改此 WooCommerce > 设置 > 电子邮件，选择一封电子邮件并将“电子邮件类型”值更改为 多部分。然后，您可以在管理员中查看您需要为主题中的纯文本版本编辑的文件。

您可以使用屏幕截图测试工具，例如Litmus（社区中最大的知名工具）、Email on Acid（我个人最喜欢的）或Testi.at（如果您的预算有限，可以使用）。

【讨论】：

这真的很有帮助，非常感谢！关于问题 #2：感谢您的澄清和关于 WC 设置的提示！我仍然不太明白接收者会得到什么/看看这个人是否将他的电子邮件客户端设置为仅文本格式（即如何处理显示：无）？另外，您是说您可以分别在 WC 文本和 html 中设置 2 封电子邮件（= Multi-part），但是 WC 将如何知道将哪封电子邮件发送给接收者？

一封电子邮件基本上是一个巨大的文本文件，可以包含不同版本的内容（如text/plain、text/html、text/x-amp-html）。因此，当 WooCommerce 发送电子邮件时，它会发送所有版本（取决于您设置的内容）。然后电子邮件客户端（在接收者端）根据接收者的设置选择显示哪一个。纯文本电子邮件不支持display:none，因为它只是纯文本。这个Developer's Guide to Email 是了解电子邮件和 MIME 工作原理的绝佳技术指南。

【参考方案2】：

自 2016 年以来，至少在 Gmail 上显示：无属性功能完全正常，但在 Outlook 中却没有。

如果电子邮件无法识别该属性，它将被忽略。 （在这种情况下，将显示内部）。

因此，如果您想创建电子邮件并确保其正常工作，我相信确保一切正常的最佳方法是进行测试，在各种服务中创建电子邮件帐户，然后向自己发送电子邮件。 大多数小型电子邮件服务将遵循与较大电子邮件服务相同的规则。 有一些工具可以帮助你测试它，你可以在this quetion看到它。

更多关于使用 HTML here 和 here 创建电子邮件的技巧。

【讨论】：

谢谢！我仍然想知道如果电子邮件客户端只读取文本格式会发生什么 - 你知道吗？

我相信this article 可以帮助您测试它​​。这种在某些提供程序中启用纯文本预览

【参考方案3】：

几乎所有电子邮件客户端都显示无。正如您可能已经看到的那样，前景是臭名昭著的。下面是一段我们用来隐藏 preheaders 的代码。

<div style="display:none;font-size:1px;color:#000000;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
<!-- pre header -->
 </div>

网上有不同的变体，但你所追求的是display:none 和mso-hide:all。 mso-hide all 专门用于 Outlook，将隐藏它所在的任何元素。请记住，如果您有嵌套表，则需要对所有表进行嵌套。

【讨论】：

谢谢！我现在也在使用其中的大部分。如果您将颜色设置为透明并将字体大小以及行高设置为零会更好吗？如果接收器没有启用 HTML 格式，你有测试过你的 preheader 会发生什么吗？然后它会显示“pre header”吗？

字体大小有时会触发垃圾邮件（尤其是在 Gmail 中）。至于透明度，我还没有测试过，但我认为 Outlook 不会喜欢它（一如既往）。