7

我正在设计一个响应式电子邮件模板，我在 Outlook Web 应用程序上有一个小问题。我发现它删除了类，所以使用媒体查询没有意义，所以我尝试隐藏这样的 tr 元素：

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

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

4

7 回答 7

1

您可以添加

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

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

于 2014-09-22T13:02:30.467 回答
1

使用这样的类：

.hide {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
于 2017-12-01T09:01:11.650 回答
0

块引用

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

<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 也可能会被忽略。

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

于 2014-09-27T18:44:15.507 回答
0

我们使用表格的组合来隐藏和显示不同的内容。根据图像的大小，您可以调整 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>
于 2015-06-10T16:08:44.243 回答
0

将需要隐藏的任何内容包装在 div 中。

div {
    width: 0;
    height: 0;
    overflow: hidden;
}
于 2017-09-08T21:23:54.043 回答
0

我昨天整天都遇到同样的问题，我在这里找到了这个问题，似乎没有正确的答案。然后我在 Litmus 社区论坛中搜索。还好看到有评论说：

还要注意 mso-hide:all，如果您尝试隐藏包含嵌套表格的表格单元格中的内容，则必须将此属性也应用于其中的任何和所有嵌套表格。

因此，我将 mso-hide:all 添加到所有子表中，并且成功了！

于 2015-07-23T15:04:42.000 回答
0

为了使这个问题保持最新，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]-->
于 2018-04-30T10:27:51.320 回答