GMail ignoriert "display: none"
Ich habe eine Abfrage, dass Google Mail "display: none" ignoriert. in E-Mail-HTML für Hide Arow oder Div
Wenn style = "display: none" in gmail nicht funktioniert, setze style = "display: none! Important;" und es funktioniert in Google Mail.
Für diejenigen, die hier ein ähnliches Problem in Bezug auf die Entwicklung von E-Mails für mobiles/Desktop-E-Mail in Google Mail haben - wenn Sie Medienabfragen verwenden und Inhalte anzeigen/ausblenden, kann die eingebettete CSS die Inline-Deklaration nicht überschreiben. Stattdessen können Sie overflow: hidden verwenden:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
In eingebetteten Medienabfragen machen Sie diese Stile natürlich rückgängig, um das Div anzuzeigen und die Desktopversion des Inhalts auszublenden.
@media only screen and (max-width: 480px) {
.mobile {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}
.desktop {
display : none !important;
}
}
Leider funktioniert die height -Eigenschaft in Google Mail nicht. Andernfalls wäre dies eine bessere Lösung, da hierdurch ein Leerzeichenbereich unterhalb des sichtbaren Inhalts erzeugt wird, der der Höhe des div entspricht.
Obwohl dies bereits beantwortet wurde, dachte ich nur, ich würde eine Lösung einsetzen, die wirklich für mich funktionierte, falls jemand dieses Problem in der Zukunft hat. Es ist wirklich eine Kombination der obigen Antworten und etwas anderes, das ich online gefunden habe.
Das Problem, das ich hatte, war für Gmail und Outlook. Gemäß dem OP würden die mobilen Inhalte, die ich hatte, in Gmail (Explorer, Firefox und Chrome) oder Outlook (2007, 2010 und 2013) nicht ausgeblendet. Ich habe dies mit dem folgenden Code gelöst.
Hier ist mein mobiler Inhalt:
<!--[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]-->
Und hier ist das 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;
}
Korrekturen für Outlook
Wie Sie dem obigen HTML-Code entnehmen können, binden Sie den gesamten Inhalt dieser Tags ein.
<!--[if !mso 9]><!--> <!--<![endif]-->,
verbirgt den Inhalt der erwähnten Outlook-Versionen. Für alle anderen E-Mail-Clients funktioniert der display:none; einwandfrei. Ich habe auch gesehen, dass Sie auch mso-hide:all verwenden können, um Dinge für Outlook auszublenden, aber ich dachte, das wäre etwas einfacher, als diesen Code inline zu platzieren.
Korrekturen für Google Mail
Jetzt für Gmail können Sie sehen, dass ich ein spezielles id mit dem Namen gmail erstellt habe, das ich dann auf ein div innerhalb des <td> angewendet habe. Ich habe COUNTLESS mit anderen Methoden wie overflow:hidden Inline und allen möglichen anderen Kombinationen ausprobiert, aber das hat bei mir funktioniert.
Kurz gesagt, das Einbetten des Inhalts in den <td> in einen <div>, der dann den overflow:hidden,width:0 usw. enthält, dann diese Stile überschreiben, indem dem Div ein id von gegeben wird. In meinem Fall gmail wurde das Problem für mich gelöst.
Wie auch immer, vielleicht wird dies in Zukunft jemand hilfreich sein!
Die Verwendung von display:none !important; behebt das Problem mit gmail, wird jedoch von Outlook 2007 und 2010 ignoriert. Umgehen Sie dies mit display:none; display:none !important; Auf diese Weise verwendet gmail eine Version und Outlook 2007 und 2010 die andere.
Es wurde bereits gesagt, dass display:none !important; arbeitet, aber niemand hat einen Anwendungsfall dafür angegeben, also gebe ich einen an, an dem ich gearbeitet habe, als ich diese Frage und Lösung zu SO gefunden habe.
Ich habe eine mehrteilige E-Mail mit Nur-Text und HTML erstellt. In der Quelle wird html aus Vorlagendateien generiert, und der reine Text wird aus dem Entfernen von Tags aus der vollständigen E-Mail erstellt.
Um zusätzlichen Text in den Klartext aufzunehmen, der nicht in der HTML-Datei angezeigt wird, besteht der einfachste Weg darin, ihn in einen <div style="display:none !important> zu packen, der bei der Generierung des Klartextes entfernt wird. Zum Beispiel, wenn dies Ihre Vorlage ist:
<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>
Der HTML-Code wird wie erwartet gerendert (keine Reihe von =), und der Nur-Text mit allen entfernten divs lautet:
This is part of an html message template.
=========================================
This is some footer text below a black line.
Danke dafür, sehr hilfreich für mich.
Maximale Höhe für Gmail versuchen, dies sollte abholen. dann max-height verwenden: erben! In der CSS sollte dies das Abstandsproblem beseitigen:
<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;
}
}
Entfernen Sie das Element vollständig aus Ihrem Quellcode.
E-Mail-Clients sind bezüglich einiger CSS-Regeln sehr streng. Da in der E-Mail kein JavaScript ausgeführt werden kann, hat ein display: none dort überhaupt keine Funktion.
Um ein Element in einer HTML-E-Mail auszublenden und in Google Mail funktionieren zu lassen, müssen Sie es auf Null setzen und die Größe in Ihrem CSS anpassen (was von Google Mail ignoriert wird).
So wie:
<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>
Darüber hinaus deckt der hinzugefügte bedingte Kommentar Sie für Outlook 07 ab.
Ich habe eine Situation, in der ich nur ein paar Worte hatte. Ich habe Schriftgröße verwendet: 0px ;.
<div style="font-size:0px">foo bar</div>
Es hat für mich funktioniert.
Mit großer Freude möchte ich diese Neuigkeiten allen mitteilen, die Google Mail jetzt als CSS-Eigenschaft "display: none" beim Testen mit EmailMonks unterstützen. Sie müssen jedoch eine Klasse mit CSS anwenden, während Sie 'display: none' verwenden, um vom Inlining-Tool nicht berührt zu werden.
Sie können mehr lesen hier
Aufbauend auf Dan S., einem anderen Beispiel, das ich häufig verwende.
@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>