在 GMail 和 Outlook 中隐藏内容不适用于 Zurb Ink 实施答案

【问题标题】：Hiding content in GMail and Outlook not working with Zurb Ink implementation在 GMail 和 Outlook 中隐藏内容不适用于 Zurb Ink 实施
【发布时间】：2015-12-18 11:10:45
【问题描述】：

我在使用Zurb Ink email framework 的桌面/移动显示/隐藏功能时遇到问题。当我使用下面的 CSS 时，它在 GMail 中正常工作，其中隐藏了移动内容并且仅显示桌面，但在 Outlook 中不。但是，使用默认的 Ink CSS（display: none 上没有 !important 标志）它在 Outlook 中有效，但在 GMail 中不。我正在使用 Outlook 2010。

我从 this Gist 获得了一些灵感，我正在使用这个 CSS：

div.gmail .show-for-small,
div.gmail .hide-for-desktop {
    display : none !important;
    mso-hide: all !important;
}

这是我的电子邮件标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <style type="text/css">
            <!-- my inline styles in here -->
        </style>
    </head>
    <body>
    <!--[if !mso]><!-->
    <div class="gmail">
    <!--<![endif]-->
    <table class="body">...</table>
    <!--[if !mso]><!-->
    </div>
    <!--<![endif]-->
    </body>

我错过了什么？

Zurb 有一个断点，位于 600px，所以我不想更改它。 Zurb提供的Ink CSS可以看here。

【问题讨论】：

标签： html css outlook zurb-ink responsive-emails

【解决方案1】：

我将自己发布一个答案，因为我最终弄明白了（至少对于 GMail、Mobile iOS 和 Outlook 支持）。

仍然坚持使用 Ink 的默认类，我将可见性类更改为：

.show-for-small,
.hide-for-desktop {
    display     : none;
    max-height  : 0;   /* Gmail */
    mso-hide    : all;  /* Outlook clients */
    overflow    : hidden;  /* Generic */
    font-size   : 0 !important;  /* Be careful with this one, only use if absolutely required */
    line-height : 0;
    padding     : 0 !important;
}

然后在 600px 断点处的“移动”视图中，我这样做是为了从根本上扭转我在上面所做的更改：

@media only screen and (max-width : 600px) {
    table[class="body"] .show-for-small,
    table[class="body"] .hide-for-desktop {
        display     : block !important;
        max-height  : 100% !important; /* Gmail */
        mso-hide    : none !important; /* Outlook clients */
        overflow    : visible !important; /* Generic */
        font-size   : 14px !important; /* Be careful with this one, only use if absolutely required */
        line-height : 100% !important;
        height      : 100% !important;
        width       : 100% !important;
    }
}

我希望这可以帮助使用 Zurb Ink 1 并且手指交叉的 Zurb 在 Foundation for Emails 发布时解决此问题。

【讨论】：

您能否详细说明样式更改背后的逻辑和可能的来源？

【解决方案2】：

我用它来隐藏 Outlook 中仅限移动设备的内容

<!--[if !mso]><\!-->
Mobile Only Content
<!-- <![endif]-->

if 块中的所有内容都不会在 Outlook 中呈现。

【讨论】：