GMail ignora "display:none"

Question

Ho una domanda che Gmail sta ignorando "display:none": cosa fare?nell'e-mail html per nascondere una riga o un div

Answer 1

Se style = "display: none" non funziona in Gmail, mettere style = "display:! None importante;" e funziona in Gmail.

Answer 2

Per chi raggiunge qui con un problema simile in materia di mobile / desktop di sviluppo e-mail in Gmail e - se si sta utilizzando media query e visualizzare / nascondere il contenuto, il CSS incorporato non sarà in grado di sovrascrivere l'Inline dichiarazione importante!. Invece è possibile utilizzare overflow: hidden, in questo modo:

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

nelle query multimediali incorporati sarà naturalmente annullare questi stili di rivelare la div, e poi nascondere la versione desktop del contenuto.

@media only screen and (max-width: 480px) {
 .mobile {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }
 .desktop {
  display : none !important;
 }
}

Purtroppo la proprietà altezza non funziona in Gmail, altrimenti sarebbe una soluzione migliore, dato che questo crea una sezione di spazio bianco sotto il contenuto visibile uguale all'altezza del div.

Answer 3

Anche se questo è già stato risposto Ho solo pensato che avevo chip con una soluzione che davvero lavorato per me nel caso qualcuno ha questo problema in futuro. E 'davvero una combinazione delle risposte di cui sopra e qualcos'altro che ho trovato in rete.

Il problema che ho avuto è stato per Gmail e Outlook. Come per il PO, i contenuti del dispositivo mobile Ho avuto non avrebbe nascosto in Gmail (Explorer, Firefox e Chrome) o Outlook (2007,2010 e 2013). Ho risolto questo utilizzando il seguente codice.

Ecco il mio contenuti mobili:

<!--[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]-->

Ed ecco il 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;
  }

correzioni per Outlook

Quindi, come si può vedere dal codice HTML sopra, avvolgendo tutto il contenuto di questi tag;

<!--[if !mso 9]><!--> <!--<![endif]-->,

nasconde il contenuto per le versioni di Outlook che ho citato. Per tutti gli altri client di posta elettronica, il display:none; funziona bene. Ho visto anche che è possibile utilizzare anche mso-hide:all per nascondere le cose per Outlook, ma ho pensato che questo era un po 'più facile di piazzare quel codice inline.

Correzioni per Gmail

Ora per Gmail, si può vedere che ho creato una chiamata id 'speciale' gmail che ho poi applicato ad un div all'interno del <td>. Ho provato innumerevoli altri metodi di usare cose come overflow:hidden linea e ogni sorta di altre combinazioni, ma questo è ciò che ha funzionato per me.

Così, in breve, avvolgendo il contenuto del <td> in una <div> che poi contiene il overflow:hidden,width:0 ecc poi sovrascrivere questi stili dando al div un id di, nel mio caso gmail risolto il problema per me.

In ogni caso, forse qualcuno troverà questa utile in futuro!

Answer 4

Utilizzando display:none !important; risolve il problema con Gmail, ma è poi ignorato da Outlook 2007 e il 2010. Si è intorno a questo utilizzando display:none; display:none !important; In questo modo Gmail utilizza una versione e Outlook 2007 e il 2010 l'uso l'altro.

Answer 5

E 'stato detto opere già display:none !important;, ma nessuno ha dichiarato un caso d'uso per questo quindi ti darò uno stavo lavorando quando ho trovato questa domanda e la soluzione su SO.

I è stata la creazione di una e-mail a più parti con la pianura / testo e HTML. In origine, HTML è generato dal file di modello, e il testo in chiaro è creata da strippaggio tag dalla posta elettronica completo.

Per includere testo aggiuntivo nel testo semplice che non viene mostrato nel codice HTML, il modo più semplice è quello di avvolgerla in un <div style="display:none !important> che verrà messo a nudo fuori quando viene generato il testo in chiaro. Per esempio, se questo è il tuo modello:

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

Il codice HTML renderà come previsto (non mucchio di s = ') e il testo semplice con tutto sarà il div ha messo a nudo:

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

Answer 6

Rimuovi completamente l'elemento dal codice sorgente.

I client di posta elettronica sono molto severi riguardo ad alcune regole CSS.Inoltre, poiché non è possibile eseguire JavaScript all'interno dell'e-mail, a display: none comunque non ha alcuna funzione lì, vero?

Answer 7

Grazie per questo, molto utile per me.

Prova max-height per Gmail questo dovrebbe raccoglierlo. quindi utilizzare max-height: Eredita importante; nel CSS Questo dovrebbe rimuovere il problema spaziatura:

<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

Al fine di nascondere un elemento in un'email HTML e farli funzionare in Gmail è necessario azzerare fuori e regolare il dimensionamento nel CSS (che Gmail ignora).

In questo modo:

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

Inoltre, le aggiunte condizionali di commento si copre per Outlook 07.

Answer 9

Ho una situazione in cui ho avuto un paio di parole. Ho usato font-size: 0px ;.

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

Ha funzionato per me.

Answer 10

Sulla Dan S., un altro esempio che uso di frequente.

@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

Con grande piacere, mi piacerebbe condividere questa notizia con tutti che gmail ora 'display: none' supporti proprietà CSS dei test condotti dalla EmailMonks . Ma è necessario applicare una classe con CSS durante l'utilizzo di 'display: none', inorder per essere toccata dal strumento inlining

.

Si può leggere di più qui

Answer 12

Se si verificano problemi con Gmail la correzione indicato nel numero tre ha lavorato anche per me. Ho applicato un approccio simile utilizzando i tag div e le sostituzioni in linea e poi definiscono uno stile CSS nello specifico tag head per Gmail. Ogni volta che voglio nascondere qualcosa dal desktop Outlook faccio la seguente: se mso. Vedere il seguente esempio:

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