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

Question

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

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

1. 是否所有电子邮件客户端都支持基本的 CSS，例如 display: none 还是太多了？
2. 如果收件人仅查看文本格式（而非 HTML）的电子邮件，会发生什么情况？电子邮件客户端是否将 HTML 转换为文本（即 display: none 仍未显示）或者电子邮件客户端是否只是输出了它可以找到的纯文本而无需 HTML 转换（即 display: none 内容仍然显示）？
3. 是否有网站可以测试电子邮件在电子邮件客户端（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 */ 

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 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，将隐藏它所在的任何元素。请记住，如果您有嵌套表，则需要对所有表进行嵌套。