クライアント間のHTML電子メールで要素を重複させますか？

Question

ブラウザ用の通常のHTMLでは、要素を重複させるのは簡単です。

しかし、「それは1996年だようなコード」OutlookがMS Wordのからレンダリングエンジンを使用して、Gmailがほとんどすべてを削除し、2つの要素を作るためのすべての方法は、私ができることを重複しているためモットーはあるHTML形式の電子メールの暗い世界で不良によるクライアントのサポートには不向きだと思います：

Position

は...多くのクライアントではサポートされませんので、何 position: absolute;または position: relative;なし top、 left、 rightされていない
• 負のマージンはGmailなどで削除されます。したがって、負のマージンはありません。
• <img>タグすべてが原因明示的な高さと幅や場所のレイアウトを、必要なときoverflow: visible;を持つ要素から「オーバーハング」を使用して、要素の内容のサイズよりも小さい幅と高さは非常にうまく機能しません。 floatのサポートの欠如と、ほとんどの場合<div>s、by necessity need to be based on tablesという不規則な処理になります。これらはGmailで削除されるよう背景画像を含む
• 何もオプションではありませんし、他の人
• でもしようと考えてはいけない（つまりは何が可能であるならば、これに基づいて何かが最も可能性の高いオプションのように思える、と述べました） HTMLメールでCSS3またはJavaScriptを使用する...

クライアント間のHTML電子メールの要素間の重複を確実に作成するために使用できるものはありますか？そして/または要素を隣接ボックスの位置に影響を与えずに境界ボックスから引き出す方法はありますか？

例えば

は、あなたが（破線とバウンディングボックスを示す背景）大きな画像がそれを押し下げるのではなく、以下の上の行を垂れ下がり、...このような何かをしたいと

要素（この場合、画像である必要はありませんが、必ずしも画像である必要はありません）は、他の要素（この場合は下の行ですが、必ずしも別個の行ではありません）

主要なクライアント互換性の問題がなければ、これを行う方法はありますか？

編集：ちょうど見つけたthis piece of crazy twisted genius：colspansとrowspansを使用して表のセルを重ねる。これはオプションかもしれませんが、クライアント間のレンダリングはまだ完全にテストされていません。以前の経験や研究の情報は大歓迎です。

---

は、我々は我々の顧客が使用するどのような顧客を予測することはできませんニュースレターを作っていると仮定し、私たちは人気の主流の電子メールクライアントをサポートする必要があります。Outlook、Gmailやヤフー、ホットメール、サンダーバード、iOS版/ OSX、Android ...

Answer 1

ほとんどの状況で天才の解決策が働いた。しかし、見通し2007年、2010年、2013年には、行スパンが削除されるためには機能しませんでした。

Answer 2

少し遅れて会話がありますが、this similar answerがお探しのテクニックです。

あなたの例は、行と列の両方にまたがっているのではるかに複雑です。私は挑戦のために起きています：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr><!-- This row is needed to enforce col widths in Outlook --> 
    <td width="100"> 
    </td> 
    <td width="300"> 
    </td> 
    <td width="200"> 
    </td> 
    </tr> 
    <tr> 
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb"> 
     Title Here 
    </td> 
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd"> 
     Image Here 
    </td> 
    </tr> 
    <tr> 
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc"> 
     Column<br>...<br>...<br>... 
    </td> 
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa"> 
     Heading 1 
    </td> 
    </tr> 
    <tr> 
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee"> 
     Content<br>...<br>...<br>... 
    </td> 
    </tr> 
</table> 

これはあなたと同じくらいです。非長方形を作ることはできないので、本体の一番上のヘッダーはそれ自身のセルになければなりません。