Question

我想从我们的系统向客户发送一封电子邮件，其中应隐藏一些标签。我设置了以下CSS：

.hidden { display: none; }

但这不起作用。在电子邮件中隐藏元素有哪些解决方案或替代方案？

Answer 1

在内容周围的范围内以及范围内的任何其他标记上使用mso-hide:all。

Answer 2

我发现唯一可行的解决方案是在HTML源代码中使用条件格式：

<!--[if !mso 9]><!-->
<div>This block of code will display <b>everywhere</b> except in Outlook 2007.</div>
<!--<![endif]-->

Answer 3

Outlook 2007使用Microsoft Word引擎呈现HTML，其中非常有限支持CSS。 This page描述了您可以期望的工作类型（display是“不受支持的”之一）。

不幸的是，你无能为力。您可以将该元素包含在HTML注释中，这将阻止它呈现，但这就是它。

Answer 4

我做了一些快速测试，发现Outlook（2000,2003,2007,2010,2013和Outlook.com）按预期支持display: none;的多个变体。另一方面，浏览器和Android上的Gmail惨遭失败。

我测试了以下内容：

<table>
  <tr>
    <td style="display: none;">01</td>
    <td style="display: none !important;">02</td>
    <td style="display: none; display: none !important;">03</td>
    <td id="displayNone">04</td> 
    <td id="displayNoneImportant">05</td>
    <td id="displayNoneDisplayNoneImportant">06</td>
  </tr>
</table>

CSS内联，HEAD和BODY

如果有ID，我在一封电子邮件的HEAD和另一封电子邮件的BODY中测试了以下CSS。

<style>
    #displayNone {
        display: none;
    }
    #displayNoneImportant {
        display: none !important;
    }
    #displayNoneDisplayNoneImportant {
        display: none;
        display: none !important;
    }
</style>

结果：CSS Inline和BODY

Outlook（全部）通过; Outlook.com Android失败，Gmail（全部）失败
Outlook（全部）通过; Gmail（全部）失败
Outlook（全部）通过; Gmail（全部）失败
Outlook（全部）通过; Gmail（全部）失败
Outlook 2007,2010＆amp; 2013年失败; Gmail（全部）失败
Outlook（全部）通过; Gmail（全部）失败

Outlook（全部）= 2000,2003,2007,2010,2013，Android Outlook，Outlook.com（IE，Fx，Chrome）

Gmail（全部）= IE，Fx，Chrome和Android中的Gmail

结果：CSS内联和HEAD

Outlook（全部）通过; Outlook.com Android失败了; Gmail（全部）失败
Outlook（全部）通过; Outlook.com Android失败了; Gmail（全部）失败
Outlook（全部）通过; Outlook.com Android失败了; Gmail（全部）失败
Outlook（全部）通过; Outlook.com Android失败了; Gmail（全部）失败
Outlook 2007,2010＆amp; 2013年失败; Outlook.com Android失败了; Gmail（全部）失败
Outlook（全部）通过; Outlook.com Android失败了; Gmail（全部）失败

长篇短篇

Outlook 2000+支持display: none;相当不错。 Gmail没有。由于失败多少，很难辨别Gmail中失败或工作的内容。在某些情况下，屏幕甚至会被裁剪掉。

如果可以的话，我稍后会重新测试并发布截图 - 现在我的测试设置耗时太长，无法保存每个场景和阅读器的屏幕截图。

Answer 5

Outlook 2007对CSS和HTML的支持有限。请阅读this article以获取更多信息。

如果基于类的CSS规则不起作用，请尝试基于ID的CSS规则。尽量让你的规则尽可能简单。

您可以使用this tool验证您的HTML和CSS，以便在Outlook 2007中使用。

Answer 6

最近，但是，作为电子邮件的一般准则：

1）始终使用表格

2）不要使用以下标签：div，p，i或b（使用em表示斜体，使用强表示粗体。

3）不要在body标签上设置字体属性，甚至不要在像table标签这样的父元素上设置字体属性。您必须在显示文本的每个区域设置字体属性;但是，您可以将其设置在tr标签上而不是每个td标签上。只记得在其后续td中显示文本的每个tr上执行此操作，除非文本包含在另一个或其他几个元素/标记内。

4）把“mso-hide：all;”作为父元素以及子元素的INLINE样式。您也可以尝试将宽度和高度设置为1px（设置为0很少适用于许多客户端），然后将可见性设置为“隐藏”，以防万一，将不透明度设置为“.0”或“0”，只是为了覆盖您的基础

5）不要在空的td中使用不间断的空格元素来创建填充（在大多数情况下，这比使用CSS填充更好）。 nbsp元素将强制高度不能小于一定的大小，这在你试图创建一个2px的垂直间距时很烦人。

5）使用“if lt mso9”技巧很有效，但避免使用它来“隐藏”桌面视图中的内容。在手机上显示它们。它不那么优雅，也会产生臃肿的代码。如果您可以，为了将来的版本兼容性，可以使用上述方法代替上述方法。

Answer 7

<p style="color:#ffffff;width:0px;height:0px;display:none"> 
<!--[if !mso]><!-->
<p style="color:#ffffff;width:0px;height:0px;display:none !important;">
<!--<![endif]-->
I am not showing !!!
</p>

这对我有用！

Answer 8

有点太晚了但你可以尝试例如：

<span style="font-size: 0px; color: White; display: none">Yada Yada</span>

Answer 9

此解决方案已在Outlook 2007上测试并正常运行。

< td style="line-height:0; border:0; font-size:0px" >

Answer 10

如何用＆＃34; display：none;＆＃34;删除标签？用代码。我使用string.split html字符串String.split("<td ")和StringBuilder sb。然后如果 - 否则。如果拆分字符串不.contains("display:none;")，则附加到stringbuilder sb.append(String)。确保放回"<td "，sb.append("<td " + String)。你可能想要排除几个拆分字符串，例如空拆分字符串，或者包含标记（"<h1 "，"<table "）。

Answer 11

您可以尝试环绕

     <!--[if !IE]><!-->


     <!--<![endif]-->

Answer 12

试试这个 - 也许它会对你有用。

.hidden{visibility: hidden;}

display：none在Outlook 2007上不起作用

12 个答案: