Gmail 忽略“显示：无”
Posted
技术标签:
【中文标题】Gmail 忽略“显示：无”【英文标题】：Gmail is ignoring "display:none" 【发布时间】：2011-04-30 03:28:45 【问题描述】：我有一个问题是 Gmail 忽略 display:none。
怎么办？在电子邮件 html 中用于隐藏行或 div。
【问题讨论】：
如果您想在电子邮件中隐藏某些内容，最简单的方法是根本不包含它们。 什么查询？请解释更多。 @leppie 我认为他的意思是支持请求 【参考方案1】：如果 style="display:none" 在 Gmail 中不起作用，请输入 style="display:none !important;"
它适用于 Gmail。
【讨论】：
只是我的意见：Pekka 的回答更有意义。如果要隐藏元素，只需将其全部删除即可。 @Jasper 您可能正在隐藏以在不同的媒体查询中使用。即使 Gmail 不支持它，其他邮件应用程序也支持它，例如 ios 原生应用程序。 这不是一个好的答案。 Gmail 不尊重 display:none。唯一可行的方法是在元素上放置 declare display:none!important 内联。但如果你这样做，你将无法覆盖它。 如果你想嵌入一些不应该显示给用户的可解析信息，效果很好。 这可能适用于 gmail（你可以用类覆盖它）但它不再适用于 Outlook，因为它不喜欢 !important【参考方案2】：非常高兴，我想与大家分享这个消息，在EmailMonks 的测试中，gmail 现在支持 'display:none' CSS 属性。但是你需要在使用 'display:none' 的同时应用一个带有 CSS 的类，这样才能不被内联工具影响。
您可以阅读更多here
【讨论】：
【参考方案3】：以 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>
【讨论】：
【参考方案4】：如果您在使用 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 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>
【讨论】：
【参考方案5】：我有一种情况，我只说了几句话。我使用了字体大小：0px；。
<div style="font-size:0px">foo bar</div>
它对我有用。
【讨论】：
【参考方案6】：为了隐藏 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。
【讨论】：
您的标记看起来很奇怪，MSO 的标记是什么样的？你肯定没有复制它。 我的标准模板在这里，如果您想查看它：github.com/dcondrey/html-email/blob/master/template/… 与您找到的任何其他模板相比，它会在更多的客户端上呈现。 您的电子邮件模板中是否有针对桌面/移动设备显示/隐藏的表格或行？我有一堆表，其中包含hide-for-desktop 和 hide-for-small 之类的类，它们是 Zurb Ink 文档的一部分。在您的标准模板中，我没有看到任何处理此类 Outlook 和 GMail 设置的示例。一般来说，我发现我的模板可以在任一 GMail 或 Outlook 中使用，但不能同时在两者中使用。【参考方案7】：
虽然这个问题已经得到解答，但我只是想我会提出一个真正对我有用的解决方案，以防将来有人遇到这个问题。这实际上是上述答案和我在网上找到的其他内容的组合。
我遇到的问题是 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 代码可以看出，将所有内容包装在这些标签中；
<!--[if !mso 9]><!--> <!--<![endif]-->,
隐藏我提到的 Outlook 版本的内容。对于所有其他电子邮件客户端，display:none; 工作得很好。我还看到您也可以使用 mso-hide:all 为 Outlook 隐藏内容，但我认为这比内联代码要容易一些。
Gmail 修复
现在对于 Gmail，您可以看到我创建了一个名为 gmail 的“特殊”id，然后我将其应用于<td> 中的一个 div。我尝试了无数其他使用方法，例如overflow:hidden inline 和各种其他组合，但这对我有用。
简而言之，将<td> 中的内容包装在<div> 中，然后包含overflow:hidden,width:0 等，然后通过给div 一个id 覆盖这些样式，在我的情况下gmail 解决了我的问题。
无论如何，也许将来有人会发现这很有帮助！
【讨论】：
这个问题的答案非常好。感谢您在一年后发布此消息——它拯救了我们的培根。 Gmail/Outlook 电子邮件 css 的白痴一直是一个真正的拖累，但这很好地解决了它。 不客气，我很高兴这对您有所帮助，弄清楚它就像找到金矿！ 你是天才！！！！这需要成为真正的最高投票最佳答案。我尝试了大约 7 种不同的方法，所有这些方法都需要在我的 css 中添加大量的类，总而言之，不能在所有电子邮件客户端上工作。这太简单了！！！！ 测试了这个，可以隐藏，但是不能显示。我认为原因是gmail不支持媒体查询。所以@media only screen and (min-width:300px) and (max-width: 500px) 内的任何东西都会被gmail忽略。 这是一些天才的工作！你真的做了出色的工作。这是我遇到的最通用和最好的解决方案，主要是因为您处理了响应式样式并很好地构建了它以处理最坏的情况！竖起大拇指！！！【参考方案8】：对于那些在 Gmail 中遇到与移动/桌面电子邮件开发相关的类似问题的人 - 如果您使用媒体查询和显示/隐藏内容，嵌入式 CSS 将无法覆盖内联的 !important 声明。相反，您可以使用溢出：隐藏，如下所示：
<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 高度的空白部分。
【讨论】：
请注意以上内容应该是阅读显示而不是显示。我尝试编辑评论，但 *** 不允许编辑少于 6 个字符。 @luke 谢谢！对于任何像我一样在未来阅读这篇文章的人。如果你想摆脱那个丑陋的空白。只需做一个 line-height: 1px;然后在您的媒体查询中添加正确的行高。我发现它在 TR 而不是 div 或 td 上效果最好。 提醒一下，我们发现使用这种方法来获取移动版本的电子邮件并不理想，因为将 Outlook 中的电子邮件转发给其他人会同时显示移动和桌面内容。现在我们尝试仅通过在表格元素（tr、td）上使用 display:block 来构建电子邮件，以使其适应移动屏幕。 作为记录，此解决方法似乎不再有效。 Gmail 正在努力阻止人们有条件地检测他们的平台。 它仍然适用于 Gmail，但您需要使用max-height: 0 并将其用于块级元素（div - 它不适用于表格或表格行）。【参考方案9】：
谢谢你，对我很有帮助。
尝试使用 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;
【讨论】：
欢迎来到 Stack Overflow！请不要添加“谢谢”作为答案。在网站上投入一些时间，您将获得足够的 privileges 来为您喜欢的答案投票，这是 Stack Overflow 表达谢谢的方式。 谢谢！这个解决方案最适合我。上面的那些给我留下了隐藏元素所在的空白。【参考方案10】：使用display:none !important; 解决了 gmail 的问题，但它随后被 Outlook 2007 和 2010 忽略。使用display:none; display:none !important; 解决了这个问题
这样，gmail 使用一个版本，Outlook 2007 和 2010 使用另一个。
【讨论】：
您可以在 Outlook 2007-13 中使用mso-hide: all;【参考方案11】：
据说display:none !important; 已经工作了，但是没有人为此说明一个用例，所以当我在 SO 上找到这个问题和解决方案时，我会给出一个我正在研究的案例。
我正在创建一个包含纯文本/文本和 html 的多部分电子邮件。在源代码中，html 是从模板文件生成的，纯文本是从完整的电子邮件中剥离标签创建的。
要在纯文本中包含 html 中未显示的附加文本，最简单的方法是将其包装在 <div style="display:none !important> 中，该 <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.
【讨论】：
或者更简单：如果接收者的客户端不支持 html 并且看到一堆不可读的 html，则隐藏备份文本。【参考方案12】：从您的源代码中完全删除该元素。
电子邮件客户端对某些 CSS 规则非常严格。另外，由于无法在电子邮件中执行 javascript，display: none 无论如何也没有任何功能，是吗？
【讨论】：
找到答案 它适用于 gmail style="display:none !important;" 许多移动设备都支持媒体查询，因此如果您设计的是响应式，这有几个用例。 JavaScript 和display: none 有什么关系？
@Jamey 在某些情况下不显示元素时隐藏元素有什么意义？客户端对媒体查询的支持令人沮丧。 litmus.com/help/email-clients/media-query-support 除了使用 JS 还能如何做到这一点？
几年前这可能是一个很好的答案，但现在，这个问题更加微妙了。我们设计我们的电子邮件“移动优先”，然后尽可能使用媒体查询提供适合大屏幕的版本。 display: none 可以在大屏版本中隐藏某些元素。以上是关于Gmail 忽略“显示：无”的主要内容，如果未能解决你的问题，请参考以下文章