css - 在 outlook 上隐藏移动表格

Question

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

我有一个这样的移动 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>

我尝试在桌面版上隐藏我的表格，它适用于网络版，但在 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 标记内的代码都是有效的。