1

HTMLニュースレターをコーディングしていて、gmailで奇妙なことに直面しました。コード：

<table cellpadding="0" cellspacing="0" width="700" height="122">
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"></td>
                </tr>
                <tr>                    
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"></td>
                    <td valign="top" height="106" width="689">
                        some content
                    </td>
                    <td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"></td>
                </tr>
                <tr>
                    <td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"></td>
                </tr>
            </table>

Gmail のスクリーンショット:

Gmail

他の電子メール クライアントからのスクリーンショット:

他のメールクライアントで

ヒントはありますか？

あなたの助けをいただければ幸いです。

4

2 に答える 2

4

ブラウザの問題です。テーブル内に画像を配置する場合、画像はテキスト行に配置されたインライン要素である必要があります。これは、その下にスペースがあり (ベースラインより下にあるテキスト行の部分、つまりディセンダー)、GMail のレンダリングが「正しい」ことを意味します。

ただし、Quirks モードでは、「ほぼ標準」モードと同様に、セル内に単独である画像は、インライン要素ではなくブロックのように動作するため、余分なスペースは取得されません。テーブル内のフォント サイズがリセットされたため、「他の」クライアントが Quirks モードになっているようです (典型的な Quirks モードのバグ)。

通常、Quirks モードは絶対に避けたいので、Standards モードを使用し、要素に CSSdisplay: blockまたはvertical-align:-anything-but-baseline を設定して img-in-table 問題を修正する<img>か、見苦しいレイアウトをダンプすることをお勧めします。 -table を使用し、代わりにいくつかの背景画像を使用します。ただし、もちろん、電子メールのコンテキストでは、スタイリングの機会は厳密に制限されています。

ええ、style="display: block"必要に応じて Quirks と Standards で同じように表示されるように画像を設定してみてください。それよりもはるかにひどい破損に直面することになります。HTML 形式の電子メールは、あらゆるレベルでまったく役に立ちません。適切な Web ページへのリンクをメールで送信するだけで、そこから抜け出す機会があれば、そうしてください。

于 2010-09-16T19:53:20.953 に答える
0

フォントの変更に関しては、「他のクライアント」が HTML 以外の本文を表示する可能性があるように思われます。gmail はデフォルトで HTML をサポートしていると思います。

content-data を HTML に設定しましたか? たとえば、c# では、次のように設定する必要がある場合があります。

MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;
于 2010-09-16T19:07:50.717 に答える