web-dev-qa-db-ja.com

Outlook 2013で画像の表示を修正するにはどうすればよいですか?

Outlook 2013の試用版では、HTMLメールの画像が非常に奇妙に表示されています。テストで把握できる限り、高さが20ピクセルより短い画像には、高さが20ピクセルになるようにパディングが追加されているようです。それを変えるために私にできることはありますか?これらの電子メールは、Outlook 2010や、私がテストしている他のすべての場所で問題なく表示されます。

それらが含まれているテーブルセルの高さを変更してみました(through height="13"およびインラインcss)、およびそれらが含まれるテーブルとテーブル行は、すべて役に立ちません。次のコードは、画像の上のセルの赤い背景を見ることができるという点で、この問題を引き起こすものの簡単な例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td>
  </tr>
</table>
</body>
</html>

誰か助けてもらえますか?

14

line-heightスタイルをtdタグに追加します(そして、適切な方法として、height属性もtdタグに追加します)。

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;">
      <img src="..." alt="" width="195" height="13" style="display:block;" />
    </td>
  </tr>
</table>

変更されたコードは、OutlookのすべてのバージョンのLitmusで正常にテストされました。

20
Matt Coughlin

セルパディングを削除すると、赤いbgは表示されません。

0
Daniel Dabes

<font size="1"><img /></font>を追加しても、問題を解決できることがわかりました。

0
tgormtx