GMailは「display：none」を無視しています
Gmailが「display：none」を無視しているというクエリがあります-どうすればよいですか？ arowまたはdivを隠すための電子メールhtml
Style = "display：none"がGmailで機能しない場合は、style = "display：none！important;"を入力しますそしてそれはGmailで動作します。
Gmailでのモバイル/デスクトップメールの開発に関連する同様の問題でここに到達する場合-メディアクエリを使用してコンテンツを表示/非表示にしている場合、埋め込まれたcssはインライン！important宣言を上書きできません。代わりに、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ではheightプロパティは機能しません。そうしないと、divの高さに等しい可視コンテンツの下に空白のセクションが作成されるため、より良いソリューションになります。
これはすでに回答済みですが、将来この問題が発生した場合に備えて、私にとって本当に有効なソリューションを提供しようと考えました。それは本当に上記の答えと私がオンラインで見つけた何かの組み合わせです。
私が抱えていた問題は、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を作成し、<td>内のdivに適用したことがわかります。 overflow:hiddenインラインや他のあらゆる組み合わせのようなものを使用する他の無数の方法を試しましたが、これは私にとってはうまくいったものです。
要するに、<td>のコンテンツを<div>にラップしてからoverflow:hidden,width:0などを含めると、divにidを与えることでこれらのスタイルを上書きし、私の場合はgmailが問題を解決しました私のために。
とにかく、おそらく誰かがこれを将来役立つと思うかもしれません！
display:none !important;を使用すると、Gmailの問題は解決しますが、Outlook 2007および2010では無視されます。display:none; display:none !important;を使用してこの問題を回避します。
すでに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は期待どおりにレンダリングされ（=の束はありません）、すべてのdivが取り除かれたプレーンテキストは次のようになります。
This is part of an html message template.
=========================================
This is some footer text below a black line.
これをありがとう、私にとって非常に役立ちます。
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;
}
}
ソースコードから要素を完全に削除します。
電子メールクライアントは、いくつかのCSSルールについて非常に厳格です。また、メール内でJavaScriptを実行できないと見なされると、display: noneとにかく機能はありませんか？
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を対象としています。
私は、2、3の言葉をただ持っている状況があります。 font-size：0px;を使用しました。
<div style="font-size:0px">foo bar</div>
それは私のために働いた。
EmailMonks によるテストで、GmailがCSSプロパティの 'display：none'をサポートするようになったすべての人とこのニュースを共有したいと思います。ただし、インラインツールを使用しないようにするには、「display：none」を使用するときにCSSでクラスを適用する必要があります。
もっと読むことができます こちら
私が頻繁に使用する別の例であるDan 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>