Outlook Web App“显示：无”不起作用

Question

我正在设计一个响应式电子邮件模板，但我在 Outlook Web 应用程序上遇到了一个小问题。 我发现它删除了类，所以使用媒体查询没有意义，所以我尝试像这样隐藏一个 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 或外部代码的链接。所以 !important 也可能会被忽略。

最后尝试隐藏内容是垃圾邮件过滤器的一个巨大危险信号，您发送的任何内容都可能最终进入垃圾邮件箱。

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:all 添加到所有子表中，它起作用了！

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

Answer 7

为了让这个问题保持最新状态，OWA 现在确实接受课程，并且可以通过将 [owa] 添加到 css 中课程列表的开头来定位。

[owa] .hide,
.hide {
    display: none!important;
    mso-hide: all;
    width: 0;
    min-width: 0;
    max-width: 0;
    height:0;
    min-height: 0;          
    max-height: 0;
    overflow: hidden;
    font-size: 0px;
    line-height: 0px;
}

通过将.hide 添加到您要隐藏的元素中，将在所有流行的电子邮件客户端中隐藏它，如果您只想隐藏 Outlook（不包括 OWA），那么我建议使用条件代码。下表将隐藏在所有电子邮件客户端中。虽然它会在从某些电子邮件客户端转发电子邮件时出现。

<!--[if !mso]><!-- -->
    <table class="hide">
        Hide me
    </table>
<!--<![endif]-->