2017-08-01 8 views
-1

Gmailで画像がオフになっているメールを表示すると、埋め込みスタイルは最初は正しく読み込まれます。ただし、画像を表示するために「下の画像を表示」リンクをクリックすると、Gmailがクラス名とIDの別のプレフィックスで電子メールマークアップを再描画します。対処方法GmailのCSS画像表示のバグはありますか?

問題は、現在のマークアップと一致するようにプレフィックスを更新せずに、以前のバージョンのスタイルシートで電子メールのスタイル設定が行われていることです。

これは、クラス名またはIDセレクタに依存するCSSルールは、イメージがオンになった瞬間に動作を停止し、要素名またはワイルドカードセレクタだけを残すことを意味します。

私は現在イメージを渡すためにmailchimpを使用していますが、コード内のイメージ要素にアクセスできません(マージタグ| IMAGE |)。この問題がGmailで発生すると、そのイメージ要素。どのようにこれを達成するためのアイデア?

<style> 
.share-img img{ 
max-width: 60%; 
margin-bottom: 5px; 
} 
@media screen and (max-width: 480px){ 
.share-img img{ 
    max-width: 90%; 
    margin-bottom: 5px; 
} 
} 
</style> 
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div> 

編集:

はここでユニークな文字列でどのようにGmailの前に付加クラス/ IDの例です。スタイルシート 'share-img'クラスと実際に 'share-img'クラスは2つ前の文字列を持っているので、画像のサイズを適切に変更していません。

gmail inspect element image

+0

ようこそ。私たちは送信前と送信後に画像のコードを見ることができますか?そのマージタグがあなたのリストを通っているのであれば、それとも条件文なのでしょうか? – Syfer

+0

送信される前に送信されるコードです。それは私のリストを通過しているので、イメージタグにデータベースの正しいイメージが挿入されます。私は答えを編集して、Gmailが何をするのかを説明します。 – tdenk94

答えて

0

メディアクエリで480pxの前にスペースを削除してみてください。 GmailはCSSサポートに非常に迷惑です。私はそれを壊している気がします。以下のコードを使用して、今動作するかどうかを確認してください。スタックオーバーフロー

@media screen and (max-width:480px){ 
.share-img img{ 
    max-width: 90%; 
    margin-bottom: 5px; 
} 
} 

乾杯

関連する問題