我有一个gmail忽略“display：none”的查询 - 该怎么办？在电子邮件html中隐藏arow或div
答案 0 :(得分：68)
如果style =“display：none”在gmail中不起作用，请输入style =“display：none！important;” 它适用于gmail。
答案 1 :(得分：43)
对于那些与移动/桌面电子邮件开发和Gmail相关的类似问题的人来说 - 如果您正在使用媒体查询和显示/隐藏内容，嵌入式CSS将无法覆盖内联！重要声明。相反，您可以使用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;
}
}
不幸的是，高度属性在Gmail中不起作用，否则它会是一个更好的解决方案，因为这会在可见内容下面创建一个等于div高度的空白部分。
答案 2 :(得分：26)
虽然这已经得到了回答，但我以为我会考虑使用一个真正适用于我的解决方案，以防将来有人遇到这个问题。它实际上是上述答案和我在网上找到的其他东西的组合。
我遇到的问题是Gmail和Outlook。根据OP，我所拥有的移动内容不会隐藏在Gmail（Explorer，Firefox和Chrome）或Outlook（2007,2010＆amp; 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>中的div。我尝试过使用其他方法的其他方法，例如overflow:hidden内联和各种其他方式，但这对我有用。
简而言之，将<td>中的内容包含在<div>中，然后包含overflow:hidden,width:0等，然后通过给div id覆盖这些样式，在我的情况下，gmail解决了我的问题。
无论如何，也许有人会在将来发现这有用！
答案 3 :(得分：23)
使用display:none !important;可以解决gmail的问题，但Outlook 2007和2010会忽略它。使用display:none; display:none !important;来解决这个问题。
这样，gmail使用一个版本，而Outlook 2007和2010使用另一个版本。
答案 4 :(得分：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将按预期呈现（没有一堆='s），并且所有div被剥离的纯文本将是：
This is part of an html message template.
=========================================
This is some footer text below a black line.
答案 5 :(得分：6)
完全从源代码中删除元素。
电子邮件客户端对某些CSS规则非常严格。此外，由于在电子邮件中没有可以执行JavaScript，display: none无论如何都没有功能，是吗？
答案 6 :(得分：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;
}
}
答案 7 :(得分：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。
答案 8 :(得分：1)
我有一种情况，我只是说了几句话。我用的是font-size：0px;。
<div style="font-size:0px">foo bar</div>
它对我有用。
答案 9 :(得分：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>
答案 10 :(得分：0)
非常高兴，我想与gmail现在支持的每个人分享这个消息＆display：none＆＃39;由EmailMonks进行测试的CSS属性。但是，您需要在使用＆＃39; display：none＆＃39;时使用CSS，以便不被内联工具触及。
您可以阅读更多here
答案 11 :(得分：-3)
如果您在使用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>