46

我有一个 Gmail 忽略的查询display:none。

该怎么办？在电子邮件 HTML 中用于隐藏行或 div。

4

12 回答 12

71

如果style="display:none"在 Gmail 中不起作用，请将style="display:none !important;" 其放入 Gmail 中。

于 2010-10-25T12:05:01.077 回答
43

对于那些在 Gmail 中遇到与移动/桌面电子邮件开发相关的类似问题的人 - 如果您正在使用媒体查询和显示/隐藏内容，嵌入式 css 将无法覆盖内联 !important 声明。相反，您可以使用溢出：隐藏，如下所示：

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

在您的嵌入式媒体查询中，您自然会撤消这些样式以显示 div，然后隐藏桌面版本的内容。

@media only screen and (max-width: 480px) {
 .mobile {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }
 .desktop {
  display : none !important;
 }
}

不幸的是，height 属性在 Gmail 中不起作用，否则这将是一个更好的解决方案，因为这会在可见内容下方创建一个等于 div 高度的空白部分。

于 2012-11-13T13:09:05.317 回答
28

虽然这已经得到了回答，但我只是想我会提出一个真正对我有用的解决方案，以防将来有人遇到这个问题。这实际上是上述答案和我在网上找到的其他内容的组合。

我遇到的问题是 Gmail 和 Outlook。根据 OP，我拥有的移动内容不会隐藏在 Gmail（Explorer、Firefox 和 Chrome）或 Outlook（2007、2010 和 2013）中。我通过使用以下代码解决了这个问题。

这是我的移动内容：

<!--[if !mso 9]><!-->
<tr>
  <td style="padding-bottom:20px;" id="mobile">
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
          </td>
    </tr>
    <tr>
          <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
    </tr>
    <tr>
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
      </td>
    </tr>
    <tr>
      <td>
        <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
          </td>
    </tr>                               
  </table>  
    </div>
  </td>
</tr>
<!--<![endif]-->

这是CSS：

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
    width:300px!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
    line-height:100%!important;
  }
*[id=gmail] {  
    display:block!important;
    width:auto!important;
    overflow:visible!important;
    float:none !important;
    height:inherit!important;
    max-height:inherit!important;
  }

Outlook 的修复

所以从上面的HTML代码可以看出，把所有的内容都包装在了这些标签里；

<!--[if !mso 9]><!--> <!--<![endif]-->,

隐藏我提到的 Outlook 版本的内容。对于所有其他电子邮件客户端，display:none;工作正常。我还看到您也可以使用mso-hide:all隐藏 Outlook 的内容，但我认为这比内联代码要容易一些。

Gmail 的修复

现在对于 Gmail，您可以看到我创建了一个“特殊”id名称gmail，然后将其应用于<td>. 我尝试了无数其他方法来使用诸如overflow:hidden内联和各种其他组合之类的东西，但这对我有用。

简而言之，将内容包装<td>在 a<div>中，然后包含overflow:hidden,width:0等，然后通过给 div 一个idof 来覆盖这些样式，在我的情况下gmail为我解决了这个问题。

无论如何，也许将来有人会发现这很有帮助！

于 2013-05-10T10:14:18.433 回答
24

使用display:none !important;解决了 gmail 的问题，但它随后被 Outlook 2007 和 2010 忽略。使用display:none; display:none !important; 这种方式 gmail 使用一个版本，Outlook 2007 和 2010 使用另一个。

于 2012-11-08T16:06:11.570 回答
7

据说已经display:none !important;可以了，但是没有人为此说明一个用例，所以当我在 SO 上找到这个问题和解决方案时，我会给出一个我正在研究的案例。

我正在创建一个包含纯文本/文本和 html 的多部分电子邮件。在源代码中，html 是从模板文件生成的，而纯文本是通过从完整电子邮件中剥离标签创建的。

要在纯文本中包含 html 中未显示的附加文本，最简单的方法是将其包装在一个<div style="display:none !important>将在生成纯文本时被剥离的文本中。例如，如果这是您的模板：

<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
   <p>This is some footer text below a black line</p>
</div>

HTML 将按预期呈现（没有一堆 =），所有 div 被剥离的纯文本将是：

This is part of an html message template.
=========================================
This is some footer text below a black line.
于 2012-06-29T14:51:55.250 回答
6

从源代码中完全删除该元素。

电子邮件客户端对某些 CSS 规则非常严格。另外，由于没有 JavaScript 可以在电子邮件中执行，display: none所以无论如何 a 那里没有任何功能，是吗？

于 2010-10-25T10:31:09.997 回答
6

谢谢你，对我很有帮助。

尝试 Gmail 的 max-height ，这应该可以接受。然后使用 max-height:inherit !important; 在 CSS 中，这应该消除间距问题：

<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">

@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}
于 2012-12-05T11:23:54.490 回答
2

为了隐藏 HTML 电子邮件中的元素并使其在 Gmail 中工作，您需要将其归零并调整 CSS 中的大小（Gmail 将忽略）。

像这样：

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
    </td>
</tr>
<!--<![endif]-->
</table>

此外，添加的条件注释涵盖了 Outlook 07。

于 2014-01-07T08:32:46.007 回答
1

我有一种情况，我只说了几句话。我使用了字体大小：0px；。

<div style="font-size:0px">foo bar</div>

它对我有用。

于 2014-05-27T11:16:02.767 回答
0

以 Dan S. 为基础，这是我经常使用的另一个示例。

@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
  p[class="hidden"] { /* I use this format to get past Yahoo Mail */
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
  }
}

<td>
  <p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>
于 2014-09-26T14:19:10.287 回答
0

非常高兴地，我想与大家分享这个消息，gmail 现在在EmailMonks的测试中支持 'display:none' CSS 属性。但是你需要在使用'display:none'时应用一个带有CSS的类，以便内联工具不受影响。

你可以在这里阅读更多

于 2016-08-31T14:49:48.707 回答
-3

如果您在使用 Gmail 时遇到问题，那么第三条中所述的修复方法也对我有用。我应用了类似的方法，使用 div 标签并在行中覆盖，然后在特定于 gmail 的 head 标签中定义 CSS 样式。每当我想从 Outlook 桌面隐藏某些内容时，我都会执行以下操作：如果！mso。请参见下面的示例：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <style type="text/css">
    So my code looks like this: 
    @media screen and (max-width : 480px) { div[id=gmail] {display:block!important;
        width:100%!important;
        overflow:visible!important;
        float:none !important;
        height:inherit!important;
        max-height:inherit!important;}
    }
    </style>
    <title></title>
    </head>
    <body>

<!--And the in the i have the following setting inline-->
<table>
<tr>
<td>
<div id="gmail" style=
"display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8"
align="center"><![if !mso]>
<tr>
<td valign="top">
<table width="133" bgcolor="#FFFFFF" style=
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0">
<!--My content--></table>
</td>
</tr>
<![endif]></table>
</div>
</td>
<!--This worked for me in Android 4.2 /4.1 /apple iOS
desktop web based: gmail, yahoo, Aol, Outlook.com in IE / FF and Chrome
desktop: outlook 2010--></tr>
</table>
</body>
</html>
于 2014-02-25T12:41:52.667 回答