Gmail 忽略“display:none”
我有一个疑问，Gmail 忽略了 display:none。
该怎么办？在电子邮件 HTML 中用于隐藏行或 div。
I have a query that Gmail is ignoring display:none.
What to do? In email HTML for hiding a row or div.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（12）
如果
style="display:none"在 Gmail 中不起作用，请输入style="display:none !important;"并且它可以在 Gmail 中使用。
If
style="display:none"does not work in Gmail, putstyle="display:none !important;"and it works in Gmail.
对于那些在 Gmail 中遇到与移动/桌面电子邮件开发相关的类似问题的人 - 如果您使用媒体查询并显示/隐藏内容，嵌入的 CSS 将无法覆盖内联 !important 声明。相反，您可以使用溢出：隐藏，如下所示：
在嵌入式媒体查询中，您自然会撤消这些样式以显示 div，然后隐藏桌面版本的内容。
不幸的是，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.
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.
虽然这个问题已经得到了回答，但我只是想我应该提供一个真正对我有用的解决方案，以防将来有人遇到这个问题。这实际上是上述答案和我在网上找到的其他内容的结合。
我遇到的问题是 Gmail 和 Outlook。根据 OP，我的移动内容不会隐藏在 Gmail（Explorer、Firefox 和 Chrome）或 Outlook（2007、2010 和 2013）中。我通过使用以下代码解决了这个问题。
这是我的移动内容：
这是 CSS：
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:
And here's the CSS:
Fixes for Outlook
So as you can see from the HTML code above, wrapping all the content in these tags;
<!--[if !mso 9]><!--> <!--<![endif]-->,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 usemso-hide:allto 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'
idcalledgmailwhich I then applied to a div within the<td>. I tried COUNTLESS other methods of using things such asoverflow:hiddeninline 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 theoverflow:hidden,width:0etc then overwriting these styles by giving the div anidof, in my casegmailsolved the problem for me.Anyway, maybe someone will find this helpful in future!
使用
display:none !important;可以解决 gmail 的问题，但 Outlook 2007 和 2010 会忽略该问题。使用display:none; 解决了这个问题。显示：无！重要；这样，gmail 使用一个版本，而 Outlook 2007 和 2010 使用另一个版本。
Using
display:none !important;resolves the issue with gmail but it is then ignored by Outlook 2007 and 2010. Got round this usingdisplay:none; display:none !important;That way gmail uses one version and Outlook 2007 and 2010 use the other.
据说已经
display:none !important;有效，但没有人说明这一点的用例，所以我将给出一个当我在 SO 上发现这个问题和解决方案时我正在研究的一个用例。我正在创建一封包含纯文本/文本和 html 的多部分电子邮件。在源代码中，html 是从模板文件生成的，纯文本是通过从完整电子邮件中剥离标签来创建的。
要在纯文本中包含 html 中未显示的其他文本，最简单的方法是将其包装在将被剥离的
HTML 将按预期呈现（没有一堆=），并且删除所有 div 的纯文本将是：
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:The HTML will render as expected (no bunch of ='s) and the plain-text with all the div's stripped will be:
从源代码中完全删除该元素。
电子邮件客户端对某些 CSS 规则非常严格。另外，由于无法在电子邮件内执行 JavaScript，因此
display: none无论如何也没有任何功能，不是吗？Remove the element from your source code completely.
E-Mail clients are very strict about some CSS rules. Also, seeing as no JavaScript can be executed inside the E-Mail, a
display: nonehas no function there anyway, does it?谢谢你，这对我很有帮助。
尝试 Gmail 的 max-height 这应该可以找到它。然后使用 max-height:inherit !important;在 CSS 中，这应该可以消除间距问题：
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:
为了隐藏 HTML 电子邮件中的元素并使其在 Gmail 中工作，您需要将其归零并调整 CSS 中的大小（Gmail 将忽略）。
像这样：
此外，添加的条件注释适用于 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:
Additionally, the added conditional comment covers you for Outlook 07.
我遇到一个情况，我只说了几句话。我使用字体大小：0px;。
它对我有用。
I have a situation in which I just had a couple of words. I used font-size:0px;.
<div style="font-size:0px">foo bar</div>It worked for me.
以我经常使用的另一个例子 Dan S. 为基础。
Building on Dan S., another example that I use frequently.
我很高兴与大家分享这个消息，通过 EmailMonks< 的测试，gmail 现在支持 'display:none' CSS 属性/a>.但是您需要在使用“display:none”时应用 CSS 类，以便不被内联工具影响。
您可以在此处阅读更多信息
With great pleasure, I would like to share this news with everyone that gmail now supports 'display:none' CSS property on testing by EmailMonks. But you need to apply a class with CSS while using 'display:none', inorder to be untouched by the inlining tool.
You can read more here
如果您遇到 Gmail 问题，第三点中所述的修复方法也对我有用。我应用了类似的方法，使用 div 标签并在线覆盖，然后在特定于 gmail 的 head 标签中定义 CSS 样式。每当我想从 Outlook 桌面隐藏某些内容时，我都会执行以下操作：if !mso。请参阅下面的示例：
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: