4

GoogleMail Web クライアントで受信したメールのフォーマットに問題があります。

表の画像の後にスペースが追加され、コンテンツにギャップが生じます。これは、この質問とまったく同じです - Gmail が画像間にギャップを表示しています。

インライン スタイル 'display: block;' の追加 MailChimp プレビューの問題を修正します。

ただし、インライン画像スタイルは、MailChimp でプレビューしてから受信トレイで受信するまでの間のある時点で削除され、インライン CSS を手動で再追加すると再び修正されるため、間違いなく問題です。

MailChimp テンプレートのスタイル

<img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;">

GoogleMail で読むときのスタイル

<img src="IMAGE_PATH" alt="" border="0" width="700" height="665">

これが起こっている理由はありますか？MailChimps 側ですか、それとも GoogleMails 側ですか?

4

5 に答える 5

4

何かが気に入らないため、Gmail は style 属性を取り除いているようです。

試してみるいくつかのこと：

1) スタイル宣言の先頭にある余分なスペースを削除します。

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     style="width:700px; display:block;">

2) 指定!important: (参照: http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css )

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     style="width:700px; display:block !important;">

line-height3)含まれている要素に追加してみてくださいtd: (参照: http://www.webdevdoor.com/html-css/html-email-development-tips/ )

<td style="line-height:0px;">
   <img src="" id="headerImage campaign-icon" mc:label="header_image"
         mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
         style="width:700px; display:block;"></td>

もう1つ試す

4）タグに属性を追加width="700"し（おそらくheight同様に投げ込みます）、属性でのみ指定します：imgdisplay:block;style

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     width="700" height="665" style="display:block;">

ここに別のものがあります

5) HTML5 doctype は、レンダリングの問題を引き起こす可能性があります。代わりにこれを使用してみてください：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

最後の一つ...

mc:allowdesigner=""6) と を設定していることに気付きました。これら 2 つからmc:allowtext=""を削除するとどうなります=""か?

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner mc:allowtext 
     style="width:700px; display:block;">

うまくいけば、これらのいずれかがあなたのために働くでしょう.

于 2013-04-03T13:26:32.487 に答える
3

私にとっては助けになります（ <td> に <p style="margin: 0;font-size: 0;line-height: 0;"> を追加します）：

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img src="{IMG_PATH}/w_bottom.jpg" 
alt="" height="8" width="653"/></p></td>
于 2014-12-05T13:15:33.457 に答える
2

Gmail が常に画像を削除するわけではありませんstyle="display: block"。@Fletchが述べているように、最も簡単なことはこれを行うことです：

<img src="" id="headerImage width="700" style="display: block;">

width...インライン スタイルを使用して を設定するのではなく。Outlook 07/10 は、場合によってはとにかく使用して設定された幅に従わないstyleため、そのように設定するのが最も安全です。または、幅を完全に省略します (レスポンシブ メール デザインに必要です)。

上記のコードは完全に機能するため、問題を引き起こす HTML 内の何か別のものでなければならないため、完全なコードをどこかに配置する必要があります。

于 2013-04-04T13:29:44.713 に答える