display:none在Outlook 2007上不起作用

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的支持非常有限.此页面描述了您可以期望工作的东西(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 inline,HEAD和BODY

哪里有ID,我在一封电子邮件的HEAD和另一封电子邮件的BODY中测试了以下CSS.

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

结果:CSS Inline和BODY

1. 展望(全部)通过; Outlook.com Android失败,Gmail(全部)失败
2. 展望(全部)通过; Gmail(全部)失败了
3. 展望(全部)通过; Gmail(全部)失败了
4. 展望(全部)通过; Gmail(全部)失败了
5. Outlook 2007,2010和2013年失败; Gmail(全部)失败了
6. 展望(全部)通过; Gmail(全部)失败了

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

Gmail(全部)= IE,Fx,Chrome和Android中的Gmail

结果:CSS Inline和HEAD

1. 展望(全部)通过; Outlook.com Android失败了; Gmail(全部)失败了
2. 展望(全部)通过; Outlook.com Android失败了; Gmail(全部)失败了
3. 展望(全部)通过; Outlook.com Android失败了; Gmail(全部)失败了
4. 展望(全部)通过; Outlook.com Android失败了; Gmail(全部)失败了
5. Outlook 2007,2010和2013年失败; Outlook.com Android失败了; Gmail(全部)失败了
6. 展望(全部)通过; Outlook.com Android失败了; Gmail(全部)失败了

长话短说

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

如果可以的话,我将在稍后重新测试并发布截图 - 现在我的测试设置花了太长时间来保存每个场景和阅读器的屏幕截图.