Czy elementy nakładają się na e-maile HTML z obsługą wielu klientów?

Question

W normalnym kodzie HTML dla przeglądarek, nakładanie się elementów jest łatwe.

Ale w mrocznym świecie e-maili HTML, gdzie motto brzmi "kod jak to jest 1996", ponieważ Outlook korzysta z silnika renderującego od MS Word, a Gmail usuwa prawie wszystko, każdą metodę nakładania się dwóch elementów, które mogę myśleć nie nadaje się z powodu złej obsługi klienta:

• Position nie jest obsługiwana w wielu klientów, więc nie position: absolute; lub position: relative; i nie top, left, right ...
• Marginesy ujemne zostaną usunięte przez Gmaila i inne. Więc nie ma ujemnych marginesów.
• Używanie „zwis” z elementem ze overflow: visible; oraz szerokość i wysokość, która jest mniejsza niż rozmiar zawartości tego elementu nie działa bardzo dobrze, gdy <img> tagi wszyscy potrzebujemy wyraźnych wysokościach i szerokościach albo gdzie układy, ze względu do braku wsparcia i nieprawidłowego traktowania przez większość czasu. (Powiedział, że jeśli coś jest możliwe, coś na tej podstawie wydaje się najbardziej prawdopodobną opcją)
• Nic udziałem tła obrazów jest opcją, ponieważ są one usuwane w Gmailu i inni
• Nawet nie myśleć o próbę używać CSS3 lub javascript w wiadomości e-mail w formacie HTML ...

Czy istnieje coś, co można niezawodnie wykorzystać do utworzenia nakładania się elementów w wiadomościach e-mail HTML z wieloma klientami? I/lub jakikolwiek sposób, aby element wystaje poza obwiednię bez wpływu na pozycjonowanie swoich sąsiadów?

Na przykład, załóżmy, że chciał zrobić coś takiego (linie przerywane i tła pokazujące obwiedni), gdzie duży obraz zwisa nad wiersz poniżej zamiast przesuwając ją w dół ...

Element (w tym przypadku <img>, ale niekoniecznie obraz) zachodzi na inne elementy (w tym przypadku rząd poniżej - ale niekoniecznie oddzielny wiersz) bez odsuwania ich.

Czy jest jakiś sposób, aby to zrobić bez poważnych problemów ze zgodnością klienta?

EDIT: Wystarczy znaleźć this piece of crazy twisted genius: Making komórki tabeli pokrywają użyciu colspans i rowspans. Może to być opcja, która nie została jeszcze dokładnie sprawdzona pod kątem renderowania między klientami, ale mile widziane są wszelkie informacje z wcześniejszych doświadczeń lub badań.

---

Załóżmy robimy newsletter gdzie nie możemy przewidzieć, co klienci nasi klienci będą użyciu, więc musimy wspierać popularnych klientów nurtu email: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android ...

Answer 1

Rozwiązanie geniusza działa w większości sytuacji. Ale w odniesieniu do prognoz na lata 2007, 2010 i 2013 nie działało, ponieważ podział na rzędy zostanie usunięty.

Answer 2

Nieco za późno na rozmowę, ale this similar answer jest techniką, której szukasz.

Twój przykład jest o wiele bardziej złożony, ponieważ obejmuje on zarówno wiersze, jak i kolumny. Jestem gotowy na wyzwanie:

<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> 

To jest tak blisko, jak to tylko możliwe. Nie można tworzyć nie-prostokątów, więc górny nagłówek w ciele musi znajdować się w jego własnej komórce.