Gmail是无视“显示：无”

https://stackoverflow.com/questions/4013670

26-09-2019
|

题

我有一个查询，Gmail是忽略“显示：无” - 做什么？在电子邮件的HTML隐藏AROW或DIV

解决方案

如果样式=“显示：无”确实在Gmail中不工作，把作风=“显示：无重要;” 和它的作品在Gmail中。

其他提示

对于那些涉及移动/桌面电子邮件发展和Gmail类似的问题此间 - 如果你正在使用媒体查询和显示/隐藏内容，嵌入的CSS将无法覆盖内嵌重要声明！相反，你可以使用溢出：隐藏，像这样：

<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的高度。

虽然这已经回答了我只是想我在一个解决方案，如果真的有人为我工作在未来有这个问题倒是芯片。这真是上述回答和别的东西，我在网上找到的组合。

这我是有这个问题对Gmail和展望。按照该OP，移动内容我不会在Gmail（IE，火狐和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;
  }

<强>修复用于观

因此，大家可以从HTML代码上面看到，包裹在这些标签的全部内容;

 ，

隐藏的Outlook版本我所提到的内容。对于所有其他电子邮件客户端，display:none;工作得很好。我也看到，你也可以使用mso-hide:all隐藏的东西为Outlook，但我认为这是一个更容易一些不是把这些代码嵌入。

<强>修复用于Gmail的

现在的Gmail，你可以看到，我创建了一个“特别” id称为gmail我然后应用到<td>内的股利。我尝试使用的东西，如overflow:hidden内联和其他组合的所有方式的其他无数的方法，但是这是对我工作。

因此，在短期，包裹在<td>内容的<div>然后包含overflow:hidden,width:0等然后通过这个DIV的id，在我的情况gmail覆盖这些样式解决了这个问题对我来说。

不管怎样，也许有人会觉得在未来有所帮助！

使用display:none !important;解决与Gmail的问题，但它随后被Outlook 2007和2010年他被忽视了这一轮使用display:none; display:none !important; Gmail中这样使用一个版本的Outlook 2007和2010使用其他。

有人说已经display:none !important;作品，但没有人说这个用例所以我给一个我工作，当我发现这个问题，并解决方案上左右。

我创建与平纹/文本和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.

从源代码中取出元件完全。

电子邮件客户端是非常严格的一些CSS规则。此外，看到没有JavaScript可以电子邮件内被执行，一个display: none具有有没有功能无论如何，是吗？

感谢这个，对我来说非常有帮助的。

尝试最大高度为Gmail的这个应该把它捡起来。然后用最大高度：继承重要;在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;
}
}

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

我有一种情况，我只是有几句话。我用字体大小：0像素;.

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

这为我工作。

建筑上丹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>

非常高兴，我想和大家说的Gmail现在支持“显示：无”分享这个消息通过的 EmailMonks 的。但是，你需要申请一类具有CSS同时使用“显示：无”，序由内联工具被改动

。

您可以阅读更多 rel="nofollow">这里

如果您遇到的问题与Gmail的数目为三个规定的修复工作对我来说也是如此。我申请使用div标签和覆盖的线，然后定义头标记特定的Gmail 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 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>

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow