在 Outlook 上隐藏移动表格

Question

我创建了一个时事通讯，但我在移动设备上使用表格时遇到问题。

我有一张这样的移动桌子：

</table class="mobile_table" width="1" height="1">
    <tr>
        <td>
           <img src="mysource/test.jpg">
        </td>
    </tr>
    <tr>
        <td align="center">
           <img src="mysource/test2.jpg">
        </td>
    </tr>
</table>

<style>
  .mobile_table{
        display: none;
        font-size: 0px;
        max-height: 0px;
        line-height: 0px;
        mso-hide: all;
        width: 0px;
        overflow: hidden;
    }
</style>

我尝试在桌面版本上隐藏我的表格，它适用于网页版，但在 Outlook 上表格没有隐藏。

你能帮我解决这个问题吗？

Answer 1

我发现的一个解决方法是使用一些电子邮件客户端定位。将下面的代码包裹在您的响应式元素周围，它应该隐藏在 Outlook 中 :) 它基本上是一个 if 语句，说“如果不是 MS Outlook，请执行此操作”。

<!--[if !mso]><!---->
    <tr>
    <td class="show_only_mobile" style="width:0; max-height: 0; height:0; overflow:hidden; display:none;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" class="show_only_mobile">
        <tr>
            <td>
               <img src="mysource/test.jpg">
            </td>
        </tr>
        <tr>
            <td align="center">
               <img src="mysource/test2.jpg">
            </td>
        </tr>
    </table>
    </td>
    </tr>
<!--<![endif]-->

然后只需重置响应式 CSS 中的所有内联 CSS。

.show_only_mobile {
    display : block !important;
    width : auto !important;
    max-height: inherit !important;
    overflow : visible !important;
    line-height: normal !important;
}

您只需要确保您的代码在有和没有 mso 标记内的代码时都是有效的。

Answer 2

Campaign Monitor 的CSS Support Guide for Email Clients 是一个方便的书签工具，它表明某些版本的 Outlook 不支持 CSS display 属性。

this MSDN article 表示支持：

以下是级联样式表规范 1 级支持但 Word 2007 不支持的所有顶级级联样式表属性的列表。请注意，Word 2007 将不受支持的级联样式表属性视为未知属性。

• 背景附件
• 背景图片
• 背景位置
• 后台重复
• 清除
• 显示
• 浮动
• 列表样式图像
• 列表样式位置
• 文本转换
• 字间距

同样，这些相同版本的 Outlook 也不支持您通常用来隐藏元素的其他“技巧”，例如更改其可见性和/或将其尺寸设置为 0 以及隐藏其溢出。