html-GMail忽略“ display:none”

我有一个查询,gmail忽略了“ display:none”-怎么办? 在电子邮件html中隐藏长尾或div

Sagar asked 2020-07-23T13:20:15Z
12个解决方案
68 votes

如果style="display:none"在Gmail中不起作用,请输入style="display:none !important;"它可以在Gmail中使用。

Sagar answered 2020-07-23T13:20:25Z
43 votes

对于到达此处且与Gmail和Gmail中的移动/桌面电子邮件开发相关的类似问题的用户-如果您使用媒体查询并显示/隐藏内容,则嵌入式CSS将无法覆盖内联!important声明。 相反,您可以使用overflow:hidden,如下所示:

<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高度的空白区域。

Luke answered 2020-07-23T13:20:54Z
26 votes

尽管已经回答了这个问题,但我只是认为我会采用一种对我真正有用的解决方案,以防将来有人遇到此问题。 这实际上是上述答案与我在网上发现的其他内容的结合。

我遇到的问题是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代码可以看出,将所有内容包装在这些标记中;

<td>,

隐藏我提到的Outlook版本的内容。 对于所有其他电子邮件客户端,<td>可以正常工作。 我还看到您还可以使用<div>为Outlook隐藏内容,但是我认为这比将代码内联起来要容易一些。

Gmail修复

现在,对于Gmail,您可以看到我创建了一个名为“ 2979176715156156718593”的“特殊” <td>,然后将其应用于overflow:hidden,width:0中的一个div。我尝试了COUNTLESS其他使用内联方法的方法,例如2979176715156718718595内联和所有其他方式的组合,但这就是 为我工作。

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

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

zik answered 2020-07-23T13:22:04Z
23 votes

使用display:none !important;解决了gmail问题,但随后被Outlook 2007和2010忽略。使用display:none; display:none !important;解决了此问题这样,gmail使用一个版本,而Outlook 2007和2010使用另一个版本。

Ross answered 2020-07-23T13:22:25Z
7 votes

据说已经有<div style="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.
darnzen answered 2020-07-23T13:22:59Z
6 votes

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

电子邮件客户端对某些CSS规则非常严格。 另外,由于无法在电子邮件中执行JavaScript,因此display: none仍然没有任何功能,对吗?

Pekka 웃 answered 2020-07-23T13:23:24Z
6 votes

谢谢你,对我非常有帮助。

尝试将Gmail的最大高度设置为最高。 然后使用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;
}
}
Dan S answered 2020-07-23T13:23:48Z
2 votes

为了隐藏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。

davidcondrey answered 2020-07-23T13:24:18Z
1 votes

我遇到的情况是我只说了几句话。 我使用了font-size:0px;。

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

它为我工作。

Roshan Singh answered 2020-07-23T13:24:42Z
0 votes

基于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>
RuHa answered 2020-07-23T13:25:01Z
0 votes

我非常高兴地与所有人分享这个新闻,即gmail现在在EmailMonks的测试中支持'display:none'CSS属性。 但是,您需要在使用“ display:none”时应用CSS类,以免被内联工具所影响。

你可以在这里阅读更多

Kevin George answered 2020-07-23T13:25:26Z
-3 votes

如果您在使用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>
user3351203 answered 2020-07-23T13:25:47Z
translate from https://stackoverflow.com:/questions/4013670/gmail-is-ignoring-displaynone