【问题标题】:Hide mobile table on outlook在 Outlook 上隐藏移动表格
【发布时间】:2017-07-19 06:27:19
【问题描述】:

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

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

</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 上表格没有隐藏。

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

【问题讨论】:

  • 没有重复,问题出在桌子上没有在总体布局上...
  • 您是否尝试过内联样式?如果是这样,请更新问题。
  • 您在哪个版本的 Outlook 中进行测试?

标签: css outlook html-table html-email


【解决方案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 标记内的代码时都是有效的。

【讨论】:

  • 很好用,你知道gmail是否存在条件吗?
【解决方案2】:

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

this MSDN article 表示支持:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-26
    • 2021-04-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多