Html Gmail 忽略“显示：无”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4013670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gmail is ignoring "display:none"
提问by Sagar
I have a query that Gmail is ignoring display:none.
我有一个 Gmail 忽略的查询display:none。
What to do? In email HTML for hiding a row or div.
该怎么办？在用于隐藏行或 div 的电子邮件 HTML 中。
回答by Sagar
If style="display:none"does not work in Gmail, put style="display:none !important;"and it works in Gmail.
如果style="display:none"在 Gmail 中不起作用，把style="display:none !important;"它放在 Gmail 中。
回答by Luke
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 :
对于那些在 Gmail 中遇到与移动/桌面电子邮件开发相关的类似问题的人 - 如果您使用媒体查询并显示/隐藏内容，则嵌入的 css 将无法覆盖内联 !important 声明。相反，您可以使用溢出：隐藏，如下所示：
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
<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.
在您嵌入的媒体查询中，您自然会撤消这些样式以显示 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;
}
}
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.
不幸的是，height 属性在 Gmail 中不起作用，否则这将是一个更好的解决方案，因为这会在可见内容下方创建一个等于 div 高度的空白部分。
回答by zik
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.
我遇到的问题是 Gmail 和 Outlook。根据 OP，我拥有的移动内容不会隐藏在 Gmail（资源管理器、Firefox 和 Chrome）或 Outlook（2007、2010 和 2013）中。我使用以下代码解决了这个问题。
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:
这是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
Outlook 修复
So as you can see from the HTML code above, wrapping all the content in these tags;
所以从上面的 HTML 代码可以看出，将所有的内容都包裹在这些标签中；
<!--[if !mso 9]><!--> <!--<![endif]-->,
<!--[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 use mso-hide:allto hide things for Outlook but I thought this was a little easier than placing that code inline.
隐藏我提到的 Outlook 版本的内容。对于所有其他电子邮件客户端，display:none;效果很好。我还看到你也可以mso-hide:all用来隐藏 Outlook 的东西，但我认为这比将代码内联更容易一些。
Fixes for Gmail
Gmail 的修复
Now for Gmail, you can see that I created a 'special' idcalled gmailwhich I then applied to a div within the <td>. I tried COUNTLESS other methods of using things such as overflow:hiddeninline and all manner of other combinations but this is what worked for me.
现在对于 Gmail，您可以看到我创建了一个id名为“特殊”的名称gmail，然后将其应用于<td>. 我尝试了无数其他方法来使用诸如overflow:hidden内联和各种其他组合之类的东西，但这对我有用。
So in short, wrapping the content in the <td>in a <div>which then contains the overflow:hidden,width:0etc then overwriting these styles by giving the div an idof, in my case gmailsolved the problem for me.
所以简而言之，将内容包装<td>在 a 中<div>，然后包含overflow:hidden,width:0等，然后通过给 div 一个idof覆盖这些样式，在我的情况下gmail为我解决了问题。
Anyway, maybe someone will find this helpful in future!
无论如何，也许将来有人会发现这很有帮助！
回答by Ross
Using display:none !important;resolves the issue with gmail but it is then ignored by Outlook 2007 and 2010. Got round this using display:none; display:none !important;That way gmail uses one version and Outlook 2007 and 2010 use the other.
使用display:none !important;可解决 gmail 的问题，但随后被 Outlook 2007 和 2010 忽略。使用display:none; display:none !important;该方法解决了这个问题，gmail使用一个版本，而 Outlook 2007 和 2010 使用另一个版本。
回答by darnzen
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.
据说已经display:none !important;有效，但没有人为此说明过用例，所以当我在 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.
我正在创建一个包含纯文本/文本和 html 的多部分电子邮件。在源代码中，html 是从模板文件生成的，纯文本是从完整的电子邮件中剥离标签创建的。
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:
要在纯文本中包含未在 html 中显示的其他文本，最简单的方法是将其包装在<div style="display:none !important>生成纯文本时将被剥离的a中。例如，如果这是您的模板：
<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:
HTML 将按预期呈现（没有一堆 =），并且去除了所有 div 的纯文本将是：
This is part of an html message template.
=========================================
This is some footer text below a black line.
回答by Pekka
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?
电子邮件客户端对某些 CSS 规则非常严格。另外，鉴于电子邮件中不能执行 JavaScript，display: none所以无论如何a都没有功能，是吗？
回答by Dan S
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:
尝试 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;
}
}
回答by davidcondrey
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).
为了隐藏 HTML 电子邮件中的元素并使其在 Gmail 中工作，您需要将其归零并调整 CSS 中的大小（Gmail 将忽略）。
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.
此外，添加的条件注释涵盖了 Outlook 07。
回答by Roshan Singh
I have a situation in which I just had a couple of words. I used font-size:0px;.
我有一种情况，我只说了几句话。我使用了字体大小：0px;。
<div style="font-size:0px">foo bar</div>
<div style="font-size:0px">foo bar</div>
It worked for me.
它对我有用。
回答by RuHa
Building on Dan S., another example that I use frequently.
建立在 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>
