当前位置：文江博客话题详情

Gmail 忽略“display:none”

发布于 2024-09-28 18:07:06 字数 87 浏览 8 评论 0原文

我有一个疑问，Gmail 忽略了 display:none。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦一生花开无言 2024-10-05 18:07:06

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

回复收藏 0 原文

浅语花开 2024-10-05 18:07:06

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

在嵌入式媒体查询中，您自然会撤消这些样式以显示 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 高度的空白部分。

For those reaching here with a similar problem relating to mobile/desktop email development in and Gmail - if you're using media queries and showing/hiding content, the embedded css will be unable to overwrite the inline !important declaration. Instead you can use overflow:hidden, like so :

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

In your embedded media queries you will naturally undo these styles to reveal the div, and then hide the desktop version of the content.

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

Unfortunately the height property doesn't work in Gmail, otherwise it would be a better solution, given that this creates a section of whitespace below the visible content equal to the height of the div.

回复收藏 0 原文

溺孤伤于心 2024-10-05 18:07:06

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

我遇到的问题是 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 代码中看到的，将所有内容包装在这些标签中；

，

隐藏我提到的 Outlook 版本的内容。对于所有其他电子邮件客户端，display:none; 工作得很好。我还发现您还可以使用 mso-hide:all 来隐藏 Outlook 的内容，但我认为这比将该代码内联放置要容易一些。

修复 Gmail

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

简而言之，将中的内容包装在

中，然后包含 overflow:hidden,width:0 等等，然后通过给 div 一个 id 来覆盖这些样式，在我的例子中 gmail 解决了我的问题。

不管怎样，也许将来有人会发现这很有帮助！

Though this has already been answered I just thought I'd chip in with a solution that really worked for me in case anyone has this problem in the future. It's really a combination of the above answers and something else that I found online.

The issue that I was having was for Gmail and Outlook. As per the OP, the mobile content I had would not hide in Gmail (Explorer, Firefox and Chrome) or Outlook (2007,2010 & 2013). I solved this by using the following code.

Here's my mobile content:

<!--[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]-->

And here's the 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;
  }

Fixes for Outlook

So as you can see from the HTML code above, wrapping all the content in these tags;

 ,

hides the content for the Outlook versions that I mentioned. For all the other email clients, the display:none; works just fine. I also saw that you can also use mso-hide:all to hide things for Outlook but I thought this was a little easier than placing that code inline.

Fixes for Gmail

Now for Gmail, you can see that I created a 'special' id called gmail which I then applied to a div within the <td>. I tried COUNTLESS other methods of using things such as overflow:hidden inline and all manner of other combinations but this is what worked for me.

So in short, wrapping the content in the <td> in a <div> which then contains the overflow:hidden,width:0 etc then overwriting these styles by giving the div an id of, in my case gmail solved the problem for me.

Anyway, maybe someone will find this helpful in future!

回复收藏 0 原文

护你周全 2024-10-05 18:07:06

使用 display:none !important; 可以解决 gmail 的问题，但 Outlook 2007 和 2010 会忽略该问题。使用 display:none; 解决了这个问题。显示：无！重要；
这样，gmail 使用一个版本，而 Outlook 2007 和 2010 使用另一个版本。

回复收藏 0 原文

相权↑美人 2024-10-05 18:07:06

据说已经 display:none !important; 有效，但没有人说明这一点的用例，所以我将给出一个当我在 SO 上发现这个问题和解决方案时我正在研究的一个用例。

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

要在纯文本中包含 html 中未显示的其他文本，最简单的方法是将其包装在将被剥离的

<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.

It has been said already display:none !important; works, but no one has stated a use case for this so I'll give one I was working on when I found this question and solution on SO.

I was creating a multi-part email with plain/text and html. In the source, html is generated from template files, and the plain text is created from stripping tags from the full e-mail.

To include additional text in the plain-text that isn't shown in the html, the easiest way is to wrap it in a <div style="display:none !important> that will be stripped out when the plain-text is generated. For instance if this is your template:

<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>

The HTML will render as expected (no bunch of ='s) and the plain-text with all the div's stripped will be:

This is part of an html message template.
=========================================
This is some footer text below a black line.

回复收藏 0 原文

蛮可爱 2024-10-05 18:07:06

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

电子邮件客户端对某些 CSS 规则非常严格。另外，由于无法在电子邮件内执行 JavaScript，因此 display: none 无论如何也没有任何功能，不是吗？

回复收藏 0 原文

瑕疵 2024-10-05 18:07:06

谢谢你，这对我很有帮助。

尝试 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;
}
}

Thanks for this, very helpful for me.

Try max-height for Gmail this should pick it up. then use max-height:inherit !important; in the CSS this should remove the spacing issue:

<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;
}
}

回复收藏 0 原文

风吹雪碎 2024-10-05 18:07:06

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

In order to hide an element in an HTML email and have it work in Gmail you need to zero it out and adjust the sizing in your CSS (which Gmail will ignore).

Like so:

<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>

Additionally, the added conditional comment covers you for Outlook 07.

回复收藏 0 原文

把昨日还给我 2024-10-05 18:07:06

我遇到一个情况，我只说了几句话。我使用字体大小：0px;。

foo bar

它对我有用。

回复收藏 0 原文

汹涌人海 2024-10-05 18:07:06

以我经常使用的另一个例子 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>

Building on Dan S., another example that I use frequently.

@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>

回复收藏 0 原文

笔芯 2024-10-05 18:07:06

我很高兴与大家分享这个消息，通过 EmailMonks< 的测试，gmail 现在支持 'display:none' CSS 属性/a>.但是您需要在使用“display:none”时应用 CSS 类，以便不被内联工具影响。

您可以在此处阅读更多信息

回复收藏 0 原文

倦话 2024-10-05 18:07:06

如果您遇到 Gmail 问题，第三点中所述的修复方法也对我有用。我应用了类似的方法，使用 div 标签并在线覆盖，然后在特定于 gmail 的 head 标签中定义 CSS 样式。每当我想从 Outlook 桌面隐藏某些内容时，我都会执行以下操作：if !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>

If you are experiencing issues with Gmail the fix stated in Number three worked for me as well. I applied a similar approach using div tags and overrides in line and then defining a CSS style in the head tag specific for gmail. Anytime that I want to hide something from outlook desktop I do the following: if !mso. See example below:

    <!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>

回复收藏 0 原文

~没有更多了~