Сделать элементы перекрывающимися в межстраничных HTML-письмах?

В обычном HTML для браузеров упрощение элементов перекрытия.

Но в темном мире электронной почты HTML, где девиз - "код типа 1996", потому что Outlook использует механизм рендеринга из MS Word, а Gmail удаляет почти все, каждый метод для перекрытия двух элементов, о котором я могу думать, - это неподходящий из-за плохой поддержки клиентов:

  • Position не поддерживается для многих клиентов, поэтому нет position: absolute; или position: relative; и не top, left, right...
  • Отрицательные поля удаляются Gmail и другими. Таким образом, нет отрицательных полей.
  • Использование "свеса" из элемента с overflow: visible;, а ширина и высота, которая меньше, чем размер содержимого элемента, не очень хорошо работает, когда теги <img> все нужны явные высоты и ширины или где макеты из-за отсутствия поддержки float и неустойчивого лечения <div> s, по необходимости необходимо основывать на таблицах большую часть времени. (при этом, если что-либо возможно, что-то, основанное на этом, похоже на наиболее вероятный вариант)
  • Ничего, включающее фоновые изображения, является вариантом, поскольку они удалены в Gmail и других
  • Даже не думайте о том, чтобы использовать CSS3 или javascript в письме HTML...

Есть ли что-то, что можно надежно использовать для создания перекрытия между элементами в электронной почте с перекрестными клиентом? И/или какой-либо способ сделать элемент выведенным из его ограничивающей рамки, не влияя на расположение его соседей?

Например, предположим, что вы хотели сделать что-то вроде этого (пунктирные линии и фоны, показывающие ограничивающие поля), где большое изображение висит над строкой ниже, а не толкает ее вниз...

enter image description here

Элемент (в этом случае <img>, но не обязательно изображение) перекрывает другие элементы (в этом случае строка ниже - но не обязательно отдельная строка), не отталкивая их.

Есть ли способ сделать это без серьезных проблем совместимости с клиентами?

РЕДАКТИРОВАТЬ: Только что нашел этот кусочек сумасшедшего извращенного гения: создание перекрытия ячеек с использованием colspans и rowspans. Это может быть вариант, еще не прошедший тщательную проверку своего кросс-клиентского рендеринга, хотя любая информация из предыдущего опыта или исследований приветствуется.

Предположим, мы создаем информационный бюллетень, в котором мы не можем предсказать, какие клиенты будут использовать наши клиенты, поэтому мы должны поддерживать популярные основные почтовые клиенты: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android...

Ответы

Ответ 1

Решение гениальности работало в большинстве ситуаций. Но для Outlook 2007, 2010 и 2013 он не работал, поскольку строки будут удалены.

Ответ 2

Немного поздно в разговоре, но этот похожий ответ - это техника, которую вы ищете.

Ваш пример намного сложнее, поскольку вы охватываете как строки, так и столбцы. Я за вызов:

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

Это будет как можно ближе. Вы не можете создавать не прямоугольники, поэтому верхний заголовок в теле должен находиться в собственной ячейке.