Как я могу произвести этот эффект в клиенте Outlook?

Question

Я создал почтовое представление в рельсах, которое отлично отображается на всех клиентах, кроме outlook. Ограничивающим фактором является отсутствие атрибута position.

Я пытаюсь поместить изображение поверх строки таблицы, поэтомучто верхний и нижний края расположены выше / ниже ряда. Я добился этого для других почтовых клиентов, поместив изображение в другой строке выше этого, сделав позицию абсолютной и присвоив ей отрицательное верхнее поле. Затем я могу уменьшить изображение и перекрыть нижний ряд сколько угодно, отрегулировав значение верхнего поля. (См. Код)

<tr>
  <td>
    <%= image_tag(attachments['logo.png'].url, style:"text- 
      align:left;height:100px; width:100px; margin:-30px 10px 10px 10px; 
      position: absolute") %>
  </td>
</tr>

<tr>
  <td style="text-align: left; padding-left: 125px;">
    Some Text
  </td>
</tr>

позиция: абсолют не работает в перспективе, что может быть хорошей альтернативой, чтобы помочь мне достичь этого?

Спасибо!

Answer 1

Вы не сможете достичь этого так же, как позиция: абсолютная. Возможны следующие варианты:

1. Разделите изображение на три части, и у каждого среза в каждом из трех разделов.
2. Создайте три ряда строк в фоновом изображении и поместите изображение вкак обычно.

Я понимаю, что ни один из них не идеален, но вы ограничены в Outlook, и обычные трюки с маржой и позицией не будут работать.

С опциями, которые у меня естьПредполагается, что вместо реструктуризации кода можно просто добавить новый блок только для Outlook, используя специальные условные операторы Outlook:

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>Outlook content</td>
    </tr>
</table>
<![endif]-->

<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>All other clients</td>
    </tr>
</table>
<!--<![endif]-->