CSS display:none 不适用于 Outlook 2007

display:none doesn't work on Outlook 2007

提问by chris

I want to send an e-mail from our system to customers, where some tags should be hidden to them. I've set the following CSS:

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

.hidden { display: none; }

But this does not work. What solutions or alternatives are there for hiding elements in an e-mail?

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

采纳答案by Dean Harding

Outlook 2007 uses the Microsoft Word engine for rendering HTML which has very limitedsupport for CSS. This pagedescribes the kind of things you can expect to work (displayis one of the "not supported" ones).

Outlook 2007 使用 Microsoft Word 引擎呈现 HTML，而该引擎对 CSS 的支持非常有限。此页面描述了您可以期望工作的类型（display是“不支持”的类型之一）。

Unfortunately, there's not much you can do. You can enclose the element in HTML comments <!-- ... -->which would stop it from rendering, but that's about it.

不幸的是，您无能为力。您可以将元素包含在 HTML 注释中<!-- ... -->，这将阻止它呈现，但仅此而已。

回答by Brian Thies

Use mso-hide:allin a span surrounding the content, and on any other tags within the span.

使用mso-hide:all周围内容的跨度，并且在跨度内的任何其他标记。

回答by Antoine

The only working solution I've found is to use conditional formatting in the HTML source :

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

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

回答by chsweb

I did some quick testing, and found that Outlook (2000, 2003, 2007, 2010, 2013 and Outlook.com) supported several variations of display: none;as expected. On the other hand, Gmail in the browser and on Android failed miserably.

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

I tested the following:

我测试了以下内容：

<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 inline, in the HEAD and in the BODY

CSS 内联，在 HEAD 和 BODY 中

Where there are IDs, I tested the follow CSS in the HEAD of one email and in the BODY of another email.

在有 ID 的地方，我在一封电子邮件的 HEAD 和另一封电子邮件的 BODY 中测试了 follow CSS。

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

RESULTS: CSS Inline and in the BODY

结果：CSS 内联和在 BODY 中

1. Outlook (all) passed; Outlook.com Android failed, Gmail (all) failed
2. Outlook (all) passed; Gmail (all) failed
3. Outlook (all) passed; Gmail (all) failed
4. Outlook (all) passed; Gmail (all) failed
5. Outlook 2007, 2010 & 2013 failed; Gmail (all) failed
6. Outlook (all) passed; Gmail (all) failed

1. Outlook（全部）通过；Outlook.com Android 失败，Gmail（全部）失败
2. Outlook（全部）通过；Gmail（全部）失败
3. Outlook（全部）通过；Gmail（全部）失败
4. Outlook（全部）通过；Gmail（全部）失败
5. Outlook 2007、2010 和 2013 失败；Gmail（全部）失败
6. Outlook（全部）通过；Gmail（全部）失败

Outlook (all) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com (IE, Fx, Chrome)

Outlook (all) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com (IE, Fx, Chrome)

Gmail (all) = Gmail in IE, Fx, Chrome and in Android

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

RESULTS: CSS Inline and in the HEAD

结果：CSS 内联和在 HEAD 中

1. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
2. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
3. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
4. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
5. Outlook 2007, 2010 & 2013 failed; Outlook.com Android failed; Gmail (all) failed
6. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed

1. Outlook（全部）通过；Outlook.com Android 失败；Gmail（全部）失败
2. Outlook（全部）通过；Outlook.com Android 失败；Gmail（全部）失败
3. Outlook（全部）通过；Outlook.com Android 失败；Gmail（全部）失败
4. Outlook（全部）通过；Outlook.com Android 失败；Gmail（全部）失败
5. Outlook 2007、2010 和 2013 失败；Outlook.com Android 失败；Gmail（全部）失败
6. Outlook（全部）通过；Outlook.com Android 失败；Gmail（全部）失败

LONG STORY SHORT

长话短说

Outlook 2000+ supports display: none;fairly well. Gmail does not. It became difficult to discern what was failing or working in Gmail due to how much it failed. The screens even became cropped in certain situations.

Outlook 2000+ 支持display: none;得相当好。Gmail 没有。由于失败的程度，很难辨别 Gmail 中出现了什么故障或工作。在某些情况下，屏幕甚至会被裁剪。

I'll retest later and post screenshots if I can — right now my testing set up is taking too long to save out screen shots of each scenario and reader.

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

回答by Prutswonder

Outlook 2007 has limited support for CSS and HTML. Read this articlefor more information.

Outlook 2007 对 CSS 和 HTML 的支持有限。阅读这篇文章了解更多信息。

If class-based CSS rules don't work, try ID-based CSS rules. Just try to keep your rules as simple as possible.

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

You can use this toolto validate your HTML and CSS for use in Outlook 2007.

您可以使用此工具来验证您的 HTML 和 CSS，以便在 Outlook 2007 中使用。

回答by naeluh

<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>

This works for me !

这对我有用！

回答by Brendan

Late, but, as general guidelines for e-mails:

迟到，但是，作为电子邮件的一般准则：

1) Always use tables

1) 总是使用表格

2) Don't use following tags: div, p, i, or b (use em for italic, and strong for bolding.

2) 不要使用以下标签：div、p、i 或 b（斜体使用 em，粗体使用 strong。

3) Don't set font properties on body tag, or even on parent elements like table tags; you must set the font properties on every area where there is text displayed; however, you CAN set it on a tr tag instead of on each td tag. Just remember to do it on EVERY tr that has text displayed in its subsequent td's, unless the text is wrapped inside another or several other elements/tags.

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

4) Put "mso-hide:all;" as an INLINE style on parent element as well as the child elements. You can also try setting width and height to 1px (setting to 0 rarely works for many clients) and then set visibility to "hidden" and just in case, set opacity to ".0" or "0", just to cover your bases.

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

5) Do not use non-breaking space elements in empty td's where you're using them to create padding (which is better than using CSS padding in most cases). The nbsp element will force heights to be incapable of being less than a certain size, which is annoying when you're trying to create, say, a 2px vertacle spacing.

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

5) Using the "if lt mso9" trick works well, but avoid using it to "hide" things in desktop view & displaying them on mobile. It's less elegant and it also creates bloated code. Use the above method(s) instead if you can, if for nothing else, for future version compatibilty's sake.

5) 使用“if lt mso9”技巧效果很好，但避免使用它在桌面视图中“隐藏”事物并在移动设备上显示它们。它不太优雅，而且还会创建臃肿的代码。如果可以的话，请改用上述方法，如果没有别的，为了将来的版本兼容性。

回答by tinkerBell

how about remove the tags with "display:none;" with code. i use string.split the html string String.split("<td ")and StringBuilder sb. then if-else. if the split string does not .contains("display:none;")then append to stringbuilder sb.append(String). make sure to put back the "<td ", so sb.append("<td " + String). u might want to exclude several split string, such as null split string,or which contains tags("<h1 ","<table ").

删除带有“display:none;”的标签怎么样？带代码。我使用 string.split html 字符串String.split("<td ")和StringBuilder sb. 然后if-else。如果拆分字符串没有.contains("display:none;")附加到 stringbuilder sb.append(String)。确保放回"<td "，所以sb.append("<td " + String)。你可能想排除几个分割字符串，例如空分割字符串，或者包含标签（"<h1 "，"<table "）。

回答by johnildergleidisson

A bit too late but you can try for example:

有点晚了，但您可以尝试例如：

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

回答by Telmo Espanha

This solution was tested on Outlook 2007 and works.

此解决方案已在 Outlook 2007 上进行测试并有效。

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