2012-08-09 5 views
14

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

Iは、彼らが(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> 

答えて

20

tdタグにline-heightスタイルを追加します(と良い対策のため、同様tdタグにheight属性を追加します)。

<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で正常にテストされました。

+0

驚くばかり!素晴らしい! –

+0

あなたは人の中の神です。 – GhostInTheSecureShell

+0

本当に本当にありがとう – Nickool

0

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

+0

すでにテーブルタグ内にある 'cellpadding = "0"以外の方法はありますか? –

-1

画像タグにstyle="display:block;"を追加します。 <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

これで余分なパディングが削除されます。

0

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

関連する問題