GMが強制的にspacer.gifを含むTDを強制的に16pxにする

Question

私はこの戦いに勝つために何時間も迷ってしまった。要約すると、私は3枚の10px画像で表を塗り潰そうとしていますが、GMailは各セルを16pxに強制しています。ここで私が働いているもの：

<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important"> 
    <tr style="height:10px" height="10"> 
    <td width="10" height="10" style="height:10px !important"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td> 
    <td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td> 
    <td width="9" height="10" style="height:10px !important"> 
     <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td> 
    </tr> 
</table> 

私はすべてを試してきたので、冗長な属性が非常に多いことを謝ります。基本的に、私はテーブルを正確に10ピクセル高くしようとしています。どんなに、しかし、Gmailはそれを16pxにします。 3つの画像すべてをソースコードから直接削除するために開発者ツールを使用すると、テーブルが10ピクセルに縮小されます。また、3つの画像のうち2つを削除しても、それはまだ16ピクセルのままです。画像が含まれている場合はTDが16ピクセルになるか、画像の周囲に3ピクセルのパディングがあるかのようになります。

誰もこのような経験はありますか？もしそうなら、どんなアイディアですか？私はまだコメントできません

Answer 1

Herbieは言ったように、TDに線の高さを設定してください。

gmailがそのセル内の空白文字に基づいてTDの最小高さを設定している可能性があるので、フォントサイズが設定されていることも確認してください。一般に、テキストがないセルには1pxのフォントサイズを設定するのがよい方法です。

これはhtml電子メール作成のためのようですか？これを他の問題で見てみましょう。ヒントはhttp://www.emailology.org/#1とhttp://www.campaignmonitor.com/resources/です。

Answer 2

...アイデア、正気の不足していたので、私は

に16px

は、行の高さの値のように聞こえる...答えとして投稿します。各TDの行の高さを10ピクセルに設定するか、各IMGをインラインブロックからインラインブロックに変更しようとしましたか？

Answer 3

私はあなたの解決策を見つけようとしていました。

これは文字通りのソリューションである、あなたのTDタグでこれを置く：

style="display:block;" 

を...または、あなたは、高さを行うことができます。

style="line-height:0" 

Answer 4

をご<img>タグでは、あなたはこれを置くことができます〜max-height。あなたの問題を解決するはずです。

HTMLで

Answer 5

は - 私たちは、それはあなたの特定の高さは完全にあなたのHTMLページ上で動作するCSSブロックタグこれに

style="display:block;" 

のように動作させるために次のCSSを使用する必要があるので、<img>タグがブロックタグではありません。

一度だけお試しください！