GMail忽略了"display:none"

Question

我有一个查询,gmail忽略"display:none" - 该怎么办？在电子邮件html中隐藏arow或div

Answer 1

如果style ="display:none"在gmail中不起作用,请将style ="display:none!important;" 它适用于gmail.

Answer 2

对于那些与移动/桌面电子邮件开发和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高度的空白部分.

Answer 3

虽然这已经得到了回答,但我以为我会考虑使用一个真正适用于我的解决方案,以防将来有人遇到这个问题.它实际上是上述答案和我在网上找到的其他东西的组合.

我遇到的问题是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,你可以看到,我创建了一个"特殊" id叫gmail我,然后应用到内部的一个div <td>.我尝试过使用其他方法的其他方法,例如overflow:hidden内联和各种其他方式,但这对我有用.

所以简而言之,将内容包装<td>在a中<div>,然后包含overflow:hidden,width:0等等,然后通过给出div来覆盖这些样式id,在我的例子中gmail为我解决了问题.

无论如何,也许有人会在将来发现这有用!

Answer 4

使用display:none !important;解决了Gmail的问题,然后它被Outlook 2007和2010忽略.使用display:none; display:none !important; 这种方式gmail使用一个版本,Outlook 2007和2010使用另一个版本.

Answer 5

据说已经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.

Answer 6

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

电子邮件客户端对某些CSS规则非常严格.另外,看到没有JavaScript可以在电子邮件中执行,display: none无论如何都没有功能,是吗？

Answer 7

谢谢你,对我很有帮助.

尝试使用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;
}
}