通常のブラウザー用 HTML では、要素を重ね合わせるのは簡単です。
しかし、Outlook はMS Wordのレンダリング エンジンを使用し、 Gmail はほとんどすべてを削除するため、「1996 年のようなコード」がモットーである HTML メールの暗い世界では、2 つの要素をオーバーラップさせるための考えられるすべての方法は、貧弱なクライアント サポート:
Positionは多くのクライアントでサポートされていないため、noposition: absolute;またはposition: relative;notop,left,right...- 負のマージンは、Gmail などによって削除されます。したがって、負のマージンはありません。
overflow: visible;要素のコンテンツのサイズよりも小さい幅と高さを持つ要素の「オーバーハング」を使用すると、<img>タグがすべて明示的な高さと幅を必要とする場合、またはレイアウトがfloatサポートされていないため、適切に機能しません。ほとんどの場合<div>、必然的にテーブルに基づく必要があります。（とはいえ、何か可能であれば、これに基づくものが最も可能性の高い選択肢のようです）- Gmail などでは削除されているため、背景画像を含むオプションはありません。
- HTML メールで CSS3 や JavaScript を使おうとは思わないでください...
クロスクライアント HTML メールで要素間の重複を作成するために確実に使用できるものはありますか? および/または隣接する要素の配置に影響を与えることなく、要素を境界ボックスから拡張する方法はありますか?
たとえば、このようなことをしたいとします (境界ボックスを示す破線と背景)。大きな画像は、下の行を押し下げるのではなく、下の行にぶら下がっています...
要素 (この場合は 、<img>必ずしも画像ではありません) は、他の要素 (この場合は下の行 - ただし別の行である必要はありません) を押しのけることなく重なります。
主要なクライアント互換性の問題なしにそれを行う方法はありますか?
編集:このクレイジーなねじれた天才の作品を見つけました:colspansとrowspansを使用してテーブルセルをオーバーラップさせます。これはオプションになる可能性がありますが、クロスクライアント レンダリングはまだ完全にはテストされていませんが、以前の経験や調査からの情報は歓迎されます。
顧客がどのクライアントを使用するか予測できないニュースレターを作成していると仮定すると、一般的な主流の電子メール クライアント (Outlook、Gmail、Yahoo、Hotmail、Thunderbird、iOS/OSX、Android など) をサポートする必要があります。