ヘッダーにスライスされたイメージを使用するHTML電子メールを作成するように割り当てられました。私はHTMLの電子メールに取り組んだことはありません。同じことを4時間かけて修正しました。テーブル内のスライスされたイメージをhtmlメール用に修正する方法
ここでは、コードです： http://jsfiddle.net/8EHED/
TRとの間のスペースは、上記のサイトにありますが、それはIE、Firefox、およびクロムなどの定期的なブラウザでは大丈夫ですが。
私が夢中になっている問題は、HTMLの電子メールメッセージを正しく見せていることです。ここでは、それは私が新しいThunderbirdのメッセージにコードをインポートするときに、次のようになります。
は、間隔はそれがあるべきようにされていませんどのように参照してください？私はこの問題を解決しようと無数の時間を費やしたくありません！何が欠けているのか、間違っているのですか？
これはテーブルですので、あなたのテーブルセルのサイズは、一貫していない、それがために一貫性のあるテーブルを作成しようとしているの不適切なサイズにあなたの細胞の大きさを歪め、ひいては異なる効果を作成します。次にあなたが設計したもの。さらなる解決策はこちら
参考：
html table cell width for different rows
またはコードを修正：
<table id="Table_01" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left width=302>
<a href="http://www.example.com">
<img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
<td valign=top align=left colspan="3" width=241>
<img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
<td valign=top align=left width=43>
<a href="http://twitter.com/">
<img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
<td valign=top align=left width=64>
<a href="http://www.facebook.com/">
<img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
</tr>
</table>
<table id="Table_02" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left width=302>
<a href="http://www.example.com/">
<img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
<td valign=top align=left width=97>
<a href="http://www.example.com/collection/photos/">
<img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
<td valign=top align=left width=78>
<a href="http://www.example.com/events/">
<img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
<td valign=top align=left colspan="3" width=173>
<a href="http://www.example.com/bottle-service/">
<img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
</tr>
</table>
ギャップ
<table cellspacing=0 cellpadding=0 border=0><tr><td><table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left width=302 height=51>
<a href="http://www.example.com">
<img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
<td valign=top align=left colspan="3" width=241>
<img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
<td valign=top align=left width=43>
<a href="http://twitter.com/">
<img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
<td valign=top align=left width=64>
<a href="http://www.facebook.com/">
<img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
</tr>
</table>
</td></tr>
<tr><td>
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left width=302 height=238>
<a href="http://www.example.com/">
<img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
<td valign=top align=left width=97>
<a href="http://www.example.com/collection/photos/">
<img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
<td valign=top align=left width=78>
<a href="http://www.example.com/events/">
<img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
<td valign=top align=left colspan="3" width=173>
<a href="http://www.example.com/bottle-service/">
<img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
</tr>
</table>
</td></tr></table>
そうですね、私はこれまでにそれを試みましたが、残念ながらそれは機能しませんでした。 GmailやHotmailなどのオンラインメールに送信すると、2つのテーブルの間にスペースが残っています。 – micah
電子メールのソースを表示して戻り文字を検索すると、コードのどこかに、ブラウザが無視するが電子メールアプリケーションが認識して有効化するテキスト書式設定オプションが表示されます。 – Rich
私が見ることのできる唯一の違いは、そこにはなかった
要素があることです。私はCSSを使ってそれをターゲットにしようとしましたが、何もしなかったので、この新しいtbody要素ではないと思います。それ以外に、更新されたsrc（電子メールの画像を含むように変更されたもの）を除いて、私はそれが一貫していると思っています。 – micahを削除するには、これを試してみてくださいスタイル= "表示の追加：ブロックを"をイメージに追加
これを確認していただきありがとうございます。矛盾したセルサイズがこのような影響を与えることは考えられませんでした。私のグラフィックを再設計する必要があるか、スライスを一貫して更新する必要があると思います。 – micah
2つのテーブルを使用してアプローチすると、最初の問題は解決されますが、2つのテーブル間に小さなギャップができます。どうすればその小さなギャップを取り除くことができますか？また、これを読んでいる人は、両方の表の高さが行の高さを正しく反映する必要があります。 – micah
テーブルの静的な高さは290です。高さフィールドを削除すると、テーブルは行の高さとみなされます。 – Rich