在 Outlook 中隐藏手机 table

Question

我创建了一份时事通讯，但我在移动设备上遇到 table 问题。

我有一部手机 table 是这样的：

</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>

我尝试在桌面版上隐藏我的 table，它在网络版上有效，但在 outlook 上 table 没有隐藏。

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

Answer 1

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

this MSDN article 支持：

The following is a list of all the top-level cascading style sheet properties that the Cascading Stylesheet Specification, Level 1 supports, but that Word 2007 does not support. Note that Word 2007 considers unsupported cascading style sheet properties to be unknown properties.

background-attachment

background-image

background-position

background-repeat

clear

display

float

list-style-image

list-style-position

text-transform

word-spacing

类似地，您通常可能用来隐藏元素的其他 "tricks"，例如更改其可见性 and/or 将其尺寸设置为 0 并隐藏其溢出，这些相同版本也不支持展望.

Answer 2

为此我找到了一个变通办法，就是使用一些电子邮件客户端定位。将下面的代码包裹在您的仅响应元素周围，它应该隐藏在 Outlook 中 :) 它基本上是一个 if 语句 "If it's not MS Outlook, do this".

<!--[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 标签内的代码都是有效的。

在 Outlook 中隐藏手机 table

Hide mobile table on outlook

css

outlook

html-table

html-email