GMail忽略“显示：无”

我有一个查询，Gmail是无视“显示：无” – 该怎么办？ 在电子邮件HTML隐藏arow或div

Answer 1

如果style =“display：none”在gmail中不起作用，那么把style =“display：none！important;” 它在Gmail中工作。

Answer 2

对于那些到达与移动/桌面电子邮件开发和Gmail相似的问题 – 如果您正在使用媒体查询和显示/隐藏内容，embedded式的CSS将无法覆盖inline！重要声明。 相反，你可以使用overflow：hidden，如下所示：

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

在embedded式媒体查询中，您自然会撤销这些样式以显示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中不起作用，否则这将是一个更好的解决scheme，因为这会在可见内容下面创build一段等于div高度的空白。

Answer 3

虽然这已经得到了答复，但我还是认为，如果将来有人遇到这个问题，我会采用真正适合我的解决scheme。 这是上面的答案和我在网上find的其他东西的组合。

我遇到的问题是Gmail和Outlook。 根据OP，我所拥有的移动内容不会隐藏在Gmail（资源pipe理器，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，您可以看到我创build了一个名为gmail的“特殊” id ，然后将其应用于<td>的div。 我尝试了使用其他方法，如overflow:hidden内联和其他组合的所有方式，但这是什么对我有用。

所以简而言之，将<td>中的内容包装在一个包含overflow:hidden,width:0等的<div> ，然后通过给div一个id来覆盖这些风格，在我的情况下， gmail解决了我的问题。

无论如何，也许有人会发现这有益于未来！

Answer 4

使用display:none !important; 解决了与Gmail的问题，但它被Outlook 2007和2010忽略display:none; display:none !important; display:none; display:none !important; 这样，Gmail使用一个版本，Outlook 2007和2010使用另一个版本。

Answer 5

据说已经display:none !important; 但是没有人为此说明了一个用例，所以当我在SO上发现这个问题和解决scheme时，我会给出一个用例。

我正在用plain / text和html创build一个多部分的电子邮件。 在源代码中，html是由模板文件生成的，而纯文本是通过从完整电子邮件中剥离标签创build的。

要在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会像预期的那样呈现（没有一堆=），而所有div被去除的纯文本将是：

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

Answer 6

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

电子邮件客户对一些CSS规则非常严格。 另外，看到电子邮件里面没有JavaScript可以执行， display: none任何function，不是吗？

Answer 7

谢谢你，对我很有帮助。

尝试最大高度的Gmail这应该拿起来。 那么使用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; } } 

Answer 8

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

Answer 9

我有一个情况，我只是有几个字。 我用font-size：0px ;.

<div style="font-size:0px">foo bar</div>

它为我工作。

Answer 10

build立在丹·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> 

Answer 11

非常高兴，我想与大家分享这个消息，Gmail现在支持“显示：无”CSS属性的testingEmailMonks 。 但是，在使用“display：none”时，您需要使用CSS应用一个类，以便不被内联工具修改。

你可以在这里阅读更多

Answer 12

如果您在使用Gmail时遇到问题，则第三项中提到的修补程序也适用于我。 我使用了类似的方法，使用div标签和覆盖行，然后定义特定于gmail的头标签中的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>