Outlook Web App“display：none”无法正常工作

Question

我正在设计一个响应式电子邮件模板，并且我在Outlook Web App上遇到了一些小问题。 我发现，它消除了阶级所以在使用媒体查询是没有意义的，所以我试图掩盖这样一个tr元素：

<tr style="mso-hide:all; 
      display:none; 
      height:0; 
      width:0px; 
      max-height:0px; 
      overflow:hidden; 
      line-height:0px; 
      float:left;"> 

但它仍然鞋了。有任何想法吗？

Answer 1

您可以添加

<tr style="visibility: hidden"></tr> 

然而，这只是使得它不可见......这是仍然存在，占用空间

Answer 2

块引用

我不完全确定的方式，你需要一个隐藏的表格行，但试试这个：

<tr style="mso-hide:all; 
     display:none!important; 
     height:0; 
     width:0px; 
     max-height:0px; 
     overflow:hidden; 
     line-height:0px; 
     float:left;"> 

这可能不起作用，因为电子邮件客户端删除了一些CSS，特别是会隐藏代码的行。它还会删除任何指向js或外部代码的链接。所以！重要的可能也会被忽略。

最后试图隐藏内容对于垃圾邮件过滤器来说是一个巨大的红旗，可能无论您使用何种方式发送邮件都会在垃圾邮件箱中结束。

Answer 3

我们使用表格的组合来隐藏和显示不同的内容。根据图像的大小，您可以调整td的高度和宽度。

样式：

td.inner { display:none; } 
table.promo_1_pic_1 { float: none; width:100%; height:95px; } 
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_2_pic_2 { float: none; width:100%; height:95px; } 
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_3_pic_3 { float: none; width:100%; height:109px; } 
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_4_pic_4 { float: none; width:100%; height:109px; } 
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; } 

HTML：

<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">   
       <!-- promo 1 content --> 
       <table class="promo_1_pic_1"><tr><td></td></tr></table> 
       <table class="promo_2_pic_2"><tr><td></td></tr></table> 
        <table class="promotion"> 
         <tr> 
          <td class="inner"><a href="#"><img src="test.jpg" alt=""/></a> 
          </td> 
          <td class="inner"><a href="#"><img src="test.jpg" alt=""/></a> 
          </td> 
         </tr> 
        </table> 
      </td> 
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">   
       <!-- promo 1 content --> 
       <h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3> 
       <table class="promo_3_pic_3"><tr><td></td></tr></table> 
       <table class="promo_4_pic_4"><tr><td></td></tr></table> 
        <table class="promotion"> 
         <tr> 
          <td class="inner"><a href="#"><img src="test.jpg"></a> 
          </td> 
          <td class="inner"><a href="#"><img src="test.jpg"></a> 
          </td> 
         </tr> 
        </table> 
     </td> 

Answer 4

昨天我有同样的问题了一整天，我发现这个问题在这里，似乎没有正确的答案。然后我在Litmus社区论坛中搜索。幸运的是看到一条评论说：

另请注意，使用mso-hide：all，如果您试图隐藏包含嵌套表格的表格单元格内的内容，则必须将此属性应用于任何和所有内嵌的表格中好。

所以我添加了mso-hide：全部给所有的子表，它工作！

Answer 5

把你需要隐藏在div中的任何东西包起来。

div { 
    width: 0; 
    height: 0; 
    overflow: hidden; 
} 

Answer 6

使用这样的类：

.hide { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
    overflow: hidden !important; 
}