46

Gmail が無視しているクエリがありますdisplay:none。

何をすべきか？行または div を非表示にするための電子メール HTML。

4

12 に答える 12

71

style="display:none"Gmail で動作しない場合は、入れて Gmailstyle="display:none !important;" で動作させます。

于 2010-10-25T12:05:01.077 に答える
43

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

残念ながら、heightプロパティはGmailでは機能しません。そうでない場合は、表示されているコンテンツの下にdivの高さに等しい空白のセクションが作成されるため、より適切な解決策になります。

于 2012-11-13T13:09:05.317 に答える
28

これはすでに回答されていますが、将来誰かがこの問題を抱えた場合に備えて、私にとって本当に役立つ解決策を考えてみました。これは、実際には上記の回答と、オンラインで見つけた他のものを組み合わせたものです。

私が抱えていた問題は、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;問題なく動作します。を使用して Outlook 用のものを非表示にすることもできmso-hide:allますが、これはそのコードをインラインに配置するよりも少し簡単だと思いました。

Gmail の修正

Gmail の場合、'special'idという名前を作成し、gmailそれを 内の div に適用したことがわかります<td>。overflow:hiddenインラインやその他のあらゆる組み合わせなどを使用する COUNTLESS の他の方法を試しましたが、これがうまくいきました。

要するに、コンテンツを でラップし、<td>次になど<div>を含むようにしてから、overflow:hidden,width:0これらのスタイルを div に を与えることで上書きするidと、私の場合gmailは問題が解決しました。

とにかく、将来誰かがこれを役に立つと思うかもしれません！

于 2013-05-10T10:14:18.433 に答える
24

を使用display:none !important;すると、gmail の問題は解決しますが、Outlook 2007 および 2010 では無視されますdisplay:none; display:none !important; 。gmail は一方のバージョンを使用し、Outlook 2007 および 2010 は他方のバージョンを使用します。

于 2012-11-08T16:06:11.570 に答える
7

すでに機能していると言われていますが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 は期待どおりにレンダリングされ (一連の = はありません)、すべての div が削除されたプレーンテキストは次のようになります。

This is part of an html message template.
=========================================
This is some footer text below a black line.
于 2012-06-29T14:51:55.250 に答える
6

ソース コードから要素を完全に削除します。

電子メール クライアントは、一部の CSS 規則について非常に厳格です。また、メール内で JavaScript が実行できないので、display: noneそこには何の機能もありませんね。

于 2010-10-25T10:31:09.997 に答える
6

これをありがとう、私にとって非常に役に立ちました。

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;
}
}
于 2012-12-05T11:23:54.490 に答える
1

ほんの数語しかなかった状況があります。font-size:0px; を使用しました。

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

それは私のために働いた。

于 2014-05-27T11:16:02.767 に答える
0

私が頻繁に使用する別の例である 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>
于 2014-09-26T14:19:10.287 に答える
-3

Gmail で問題が発生している場合は、番号 3 に記載されている修正も同様に機能しました。div タグとオーバーライドをインラインで使用して同様のアプローチを適用し、gmail に固有の head タグで CSS スタイルを定義しました。Outlook デスクトップから何かを隠したいときはいつでも、次のようにします。以下の例を参照してください。

    <!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>
于 2014-02-25T12:41:52.667 に答える