34

私は HTML メールに取り組んでおり、MailChimp のレスポンシブ メール テンプレートをCSS インライン ツールと組み合わせて使用​​しています。ほとんどの場合、電子メールは無数の電子メール クライアントで見栄えがよくなりますが、Gmail では恐ろしく誤って伝えられます。

返信矢印の横にあるドロップダウン メニューから Gmail の [オリジナルを表示] オプションを使用すると、元の HTML がメール クライアントに実際に表示されるものとは異なります。これは、開発者ツールで要素を調べることで確認できます。これはデスクトップとモバイルで発生します。電子メール クライアントが要素からインライン スタイル属性を削除しています。

style 属性を削除する基準の 1 つは、要素にクラスも含まれているかどうかです。誰でもこれを確認できますか？また、テーブル タグからすべてのスタイル属性を削除しているように見えます。誰でもこれを確認できますか？

この問題の回避策は何ですか?

Gmail と Yahoo のソースを含む電子メールのスクリーンショットを以下に示します。

ソースが Chrome デベロッパー ツールで表示された Gmail のメールのスクリーンショット

ここに画像の説明を入力

Chrome 開発者ツールでソースが表示された Yahoo の電子メールのスクリーンショット

ここに画像の説明を入力

4

6 に答える 6

28

私の仕事でマーケティング キャンペーン用の電子メールを定期的にコーディングしている者として、私はあなたの痛みを感じています。Gmail は、他の多くの電子メール クライアントと同様に、コード化するのが少しおかしくなることがあります。1 つは、本文の外側にある CSS を削除することです。そのため、メディア クエリやドキュメント レベルのスタイルなどを入れても機能しません。私があなたにできる最善のアドバイスは、インライン CSS を手作業でコーディングし、凝ったものは避けることです。実際、スタイル設定に HTML 属性を使用できる場合は、CSS の代わりにそれを使用してください。例としては、background-color の代わりに bgcolor があります。

これは、私が見つけた特定の問題に関連する記事です。幸運を祈ります。

于 2013-07-12T02:56:13.290 に答える
25

今確認したところ:と文字の間;にスペースを入れないと、Gmail はインライン スタイル属性を取り除きます。,:

これはうまくいきます：

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

ただし、スペースを使用しないと、同じルールが削除されます。これを書く場合：

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

Gmail クライアントで次の出力が得られます。

<span>text</span>

編集：

この動作に加えてfont-family、ネストされた a<table>や aを宣言すると、Gmail がインライン スタイルを削除する傾向があることに気付き<td>ました。プリプロセッサの一般的なルールが何であるかはまだわかりません。Google で確認しましたが、 Gmail の HTML メール作成に関する公式ドキュメントは見つかりません。

于 2016-06-26T17:36:45.193 に答える
5

gmail には複数の回避策があります。Gmail は、メールから気に入らないものを完全に取り除いてしまうので、スタイリングに関しては非常にジョーカーです。

ここにいくつかの小さなヒントがあります：

Gmail は画像間に空白を追加するか、コンテナ td のサイズを拡大します: 画像に style="display:block" を指定することでこれを修正できます (TD が画像と同じ幅および/または高さであることを確認してください)。

Gmail は黒いリンクを青いリンクとしてレンダリングします: はい、これは醜いです。#000000 の代わりに #000001 を使用します。

Gmail は電話番号をクリック可能にします: クライアントによっては、それが良いことであるかどうかも異なりますが、それを回避する 1 つの方法は、電話番号の周りにスタイルを設定した空のアンカー タグを含めることです。

例: <a style="color:#000001; text-decoration:none;>555 555-5555</a>. 自分のコードを恥ずかしく思うかもしれませんが、効果的なちょっとしたハックです。

于 2013-07-31T18:24:12.083 に答える
3

これをミックスに追加すると思いました。私もこの問題に遭遇し、生のソースを見ると、1000文字の制限のために8ビットエンコーディングが奇妙な場所で行を分割していることに気付いたので、次のようなコンテンツになってしまいました:

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">

解決策は、コンテンツをbase64でエンコードし、チャンク分割または同じことを達成するために必要なツールを使用することです。

phpで私が行っ$html = chunk_split(base64_encode($html))てから設定しContent-Transfer-Encoding: base64ました。今、Gmailは私を愛しています。

于 2015-11-30T08:43:08.057 に答える
2

CSS のタイプミスを確認してください

Gmail が特定のスタイルを削除する理由は、2011 年の OP から変更された可能性がありますが、2020 年に私が発見したことは次のとおりです...

私のメールの<style>ブロックで、本質的にタイプミスがありました（「d」に注意してください）：<head>

.link {
  text-decoration: underline;d
}

電子メールを調べたところ、ルールが (他のすべてと一緒に)<style>ブロック内にあることがわかりました。ただし、メールでそのクラスを使用した場所はすべて、Gmail によって取り除かれていました。だから<p class="link"> ... </p>魔法のようになりまし<p> ... </p>た。

さらに、宣言されたすべてのルール.link { ... }も HTML ドキュメントから削除されました。したがって、次の例でclass="small"は機能しますがclass="link"、class="headline"HTML から削除されます。

<style>
  .small {
    font-size: 12px;
  }
  .link {
    text-decoration: underline;d
  }
  .headline {
    font-size: 18px;
  }
</style>
于 2020-08-21T17:53:20.820 に答える
1

CSS セレクターを使用することも、私が使用できた別の回避策です。私の例では、HTML テーブルをフォーマットしようとしています。gmail がすべての ID 属性と CLASS 属性を取り除き、CSS を役に立たなくしていることがわかりました。

調査の結果、gmail が私のタイトル属性を削除していないことに気付きました。そこで、タイトル セレクターを使用して CSS ルールを作成しました。これはうまくいくようです：

[title~=myTitle] {background: black; color: white;}

これがベストプラクティスだとは思いませんが、言及したいと思いました。

于 2013-12-19T16:28:21.527 に答える