Outlook（2007および2010）のHTML電子メール内のテーブルのTD要素の下に不均一なスペースがあります

Question

この問題を調査して、ウェブ上で多くの修正候補を見つけましたが、何も問題はありません。

問題は、私が設計しているHTML電子メールのテーブル内の特定のTD要素の間のギャップです。右側のサイドバーでlink to a screen grab of the problem

で、「レベル2」とその上に薄い丸いコーナーボックスの間に隙間があってはならない。ここ

をOutlook 2007でのみ、この方法を表示し、2010年です。ここで

は、青色のボックスを作成し、ネストした表のコードです：

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table> 

あなたが見ることができるように、これは私が見つけた回避策の1に提案されたように、私はすべての空白を削除しました。 TD要素に 'line-height：0; font-size：0'スタイルを挿入し、イメージ自体に 'display：block'スタイルを挿入しました。これらのどれも、わずかな違いはありませんでした。

この問題は、他の電子メールクライアントまたはブラウザには表示されません。

助けてください！

Answer 1

Outlook 2007以降では、Wordを使用してHTMLをレンダリングします。ここにはan article about thisがあり、より強く批判される記事やウェブサイトへのリンクがあります。

Word（またはOutlook自体）でメッセージをデザインしようと思うかもしれませんか？もちろん、正常な電子メールクライアントでは正しく表示されないことがあります。

Answer 2

html電子メールビルドでは、電子メールクライアント（特にOutlook）のCSSサポートが貧弱なため、テーブルを使用するのが標準的な方法です。

あなたのテーブル構造を維持したが、これらの追加を試してみてください。

• style="display:block;margin:0;padding:0"
としてのCSSの設定、各画像については、次の2つのセル
• にbox_dark_top.gifとvalign="top"を含むTDセルにvalign="bottom"を追加

• 内部ではなくインラインCSSを使用する

  <table class="box" width="200" border="0" cellspacing="0" cellpadding="0"> 
  <tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr> 
  <tr> 
      <td valign="top" class="box_dark"> 
       <h2>Level 2<br /><span class="white">Care Assistants</span></h2> 
       <h2>Level 3<br /><span class="white">Senior Carers</span></h2> 
       <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2> 
      </td> 
  </tr> 
  <tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table> 
  

Answer 3

TDの高さだけでなく、一定の高さは持っている必要があり、他のTD設定します。あなたはまた、電子メールでALL TDの上で幅を使用する必要があります*

<td valign="bottom" height="10" width="200"> 

を。

Answer 4

Outlookは、imgタグをラッピングして、マージントップをスタイリングしているように感じます。あなたはhtmlとして電子メールを保存することによって生成されたhtmlをチェックすることができます。