显示:没有一个不支持Outlook 2007

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?

但这行不通。在电子邮件中隐藏元素有什么解决方案或替代方案?

11 个解决方案

#1

Outlook 2007 uses the Microsoft Word engine for rendering HTML which has very limited support for CSS. This page describes the kind of things you can expect to work (display is one of the "not supported" ones).

Outlook 2007使用Microsoft Word引擎渲染HTML，这对CSS的支持非常有限。这个页面描述了您可以预期的工作类型(显示是“不支持”的内容之一)。

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注释会阻止它渲染，就这样。

#2

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

使用mso-hide:all in a span around the content, and on any other tags in the span。

#3

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

#4

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)支持几种不同的显示方式:无;像预期的那样。另一方面，在浏览器和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内联，在头部和身体

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

在有IDs的地方，我在一封邮件的头和另一封邮件的正文中测试了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内联和正文。

Outlook (all) passed; Outlook.com Android failed, Gmail (all) failed
前景(所有)通过;Outlook.com Android失败，Gmail(全部)失败
Outlook (all) passed; Gmail (all) failed
前景(所有)通过;Gmail(所有)失败
Outlook (all) passed; Gmail (all) failed
前景(所有)通过;Gmail(所有)失败
Outlook (all) passed; Gmail (all) failed
前景(所有)通过;Gmail(所有)失败
Outlook 2007, 2010 & 2013 failed; Gmail (all) failed
展望2007、2010、2013年Gmail(所有)失败
Outlook (all) passed; Gmail (all) failed
前景(所有)通过;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 (all) = Gmail in IE, Fx, Chrome和Android

RESULTS: CSS Inline and in the HEAD

结果:CSS内联在头部

Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
前景(所有)通过;Outlook.com Android失败;Gmail(所有)失败
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
前景(所有)通过;Outlook.com Android失败;Gmail(所有)失败
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
前景(所有)通过;Outlook.com Android失败;Gmail(所有)失败
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
前景(所有)通过;Outlook.com Android失败;Gmail(所有)失败
Outlook 2007, 2010 & 2013 failed; Outlook.com Android failed; Gmail (all) failed
展望2007、2010、2013年Outlook.com Android失败;Gmail(所有)失败
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
前景(所有)通过;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+支持显示:无;相当好。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.

如果可以的话，我稍后再测试并发布截屏——现在我的测试设置太长了，无法保存每个场景和阅读器的截屏。

#5

Outlook 2007 has limited support for CSS and HTML. Read this article for 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 tool to validate your HTML and CSS for use in Outlook 2007.

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

#6

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标签上的字体属性，甚至表标签等父元素上的字体属性;必须在显示文本的每个区域设置字体属性;但是，您可以将它设置在tr标记上，而不是在每个td标记上。只要记住，在每个tr中都要这样做，这些tr的文本都显示在其后的td中，除非文本被包装在另一个或其他几个元素/标记中。

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填充要好)。否则，当你试图创建一个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”技巧很有效，但是避免使用它在桌面视图中“隐藏”东西，并在移动设备上显示它们。它不那么优雅，而且还会创建膨胀的代码。如果可以的话，为了将来的版本兼容性，可以使用上面的方法。

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

This works for me !

这对我很有效!

#8

A bit too late but you can try for example:

有点太迟了，但是你可以试试:

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

#9

This solution was tested on Outlook 2007 and works.

该解决方案在Outlook 2007上进行了测试，并取得了成功。

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

#10

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 " ).

如何使用“显示:none”来删除标记，并使用代码。我使用字符串。分割html字符串。split(“

”)和stringbuilder>

#11

-2

Try this — maybe it will work for you.

试试这个——也许对你有用。

.hidden{visibility: hidden;}

#1