发表新帖
发表新帖

Gmail is ignoring “display:none”

后端 未结
关注
12 2086
旧巷少年郎
旧巷少年郎 2020-12-08 02:14

I have a query that Gmail is ignoring display:none.

What to do? In email HTML for hiding a row or div.

相关标签:
12条回答
  • 傲寒
    2020-12-08 02:48

    It has been said already display:none !important; works, but no one has stated a use case for this so I'll give one I was working on when I found this question and solution on SO.

    I was creating a multi-part email with plain/text and html. In the source, html is generated from template files, and the plain text is created from stripping tags from the full e-mail.

    To include additional text in the plain-text that isn't shown in the html, the easiest way is to wrap it in a <div style="display:none !important> that will be stripped out when the plain-text is generated. For instance if this is your template:

    <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>

    The HTML will render as expected (no bunch of ='s) and the plain-text with all the div's stripped will be:

    This is part of an html message template.
=========================================
This is some footer text below a black line.
    0 讨论(0)
  • 面向向阳花
    2020-12-08 02:48

    Thanks for this, very helpful for me.

    Try max-height for Gmail this should pick it up. then use max-height:inherit !important; in the CSS this should remove the spacing issue:

    <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;
}
}
    0 讨论(0)
  • -上瘾入骨i
    2020-12-08 02:51

    I have a situation in which I just had a couple of words. I used font-size:0px;.

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

    It worked for me.

    0 讨论(0)
  • 你的背包
    2020-12-08 02:51

    If you are experiencing issues with Gmail the fix stated in Number three worked for me as well. I applied a similar approach using div tags and overrides in line and then defining a CSS style in the head tag specific for gmail. Anytime that I want to hide something from outlook desktop I do the following: if !mso. See example below:

        <!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>
    0 讨论(0)
  • 鱼传尺愫
    2020-12-08 02:52

    Building on Dan S., another example that I use frequently.

    @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>
    0 讨论(0)
  • 情话喂你
    2020-12-08 02:54

    Using display:none !important; resolves the issue with gmail but it is then ignored by Outlook 2007 and 2010. Got round this using display:none; display:none !important; That way gmail uses one version and Outlook 2007 and 2010 use the other.

    0 讨论(0)
 看不清?
提交回复
热议问题