Электронная почта в формате HTML — Outlook 2007+10, выравнивание несвязанных таблиц

У меня есть дилемма, с которой я никогда раньше не сталкивался, которая поставила меня в тупик. В проекте, созданном Outlook 07 и 10, выравниваются две совершенно несвязанные строки таблицы. Это сложный макет электронной почты, поэтому он содержит много таблиц. Содержимое в левой колонке привязано к нижнему (или верхнему) тегу hr, изображенному здесь:

<tr><td height="20"></td></tr>
<tr><!-- start of sidebar product (horizontal)-->
    <td>
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="170">
                    <a href="" title="inline product 2" style="text-decoration: none;">
                        <!-- product Image -->
                        <img border="0" style="font-family:Arial,Helvetica,sans-serif;display:block" src="sidebar-beer-tbc.jpg" alt="South Island Marlborough Sauvignon Blanc" width="170" height="105">
                    </a>    
...

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

Любая помощь будет принята с благодарностью, это привело меня в отчаяние.

Поскольку это для клиента и содержит конфиденциальную информацию, я не предоставил готовый документ, но вот аннотированный отрывок из двух сравнений. https://skitch.com/tilt/r3w65/photoshop


html css html-email outlook-2007
person tiltos    schedule 12.04.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы столкнулись с ошибкой разрыва страницы Outlook 2007. По сути, поскольку Outlook 2007/10 использует механизм рендеринга Word, они организуют его для печати, а не для экрана.

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

Это действительно раздражает — единственный способ обойти это — полностью закрыть строки выше в том же месте, вставить что-то шириной 100% (может быть прозрачная линия высотой 1 пиксель), а затем снова запустить таблицы внизу.

person Dan Blows    schedule 14.04.2011
comment
У меня была аналогичная проблема, и я вставил <br style="line-height:0 ; height:0 ; font-size:0">, невидимый для большинства клиентов. - person troelskn; 11.01.2014

arrow_upward
0
arrow_downward

Outlook делает это при наличии диапазонов (colspan или rowspan). В то время как другие клиенты обрабатывают составные строки и столбцы и разделяют их с точки зрения макета, Outlook вычисляет их неправильно. Это результат использования идиотского механизма компоновки Word в Outlook — решение, которое вернуло форматирование электронной почты к 1995 году — но я отвлекся.

Решение вашей проблемы состоит в том, чтобы взять оскорбительные поля и вместо использования каких-либо интервалов превратить их в собственную полную таблицу. Таким образом, на вашем изображении отдельные напитки слева будут находиться в нерастянутой таблице 3x3, а вертикальная боковая панель «продукт подлежит уточнению» будет собственной 1x4 или любой другой вертикальной нерастянутой таблицей. В общем, это решило это для меня. Кроме того, иногда необходимо задать этим внутренним таблицам фиксированную высоту, чтобы они не стали height="100%" и не нарушили макет (опять же, только в Outlook).

person Sajid    schedule 12.04.2011
comment
Спасибо за ваш ответ. К сожалению, несмотря на то, что такая же визуальная особенность может проявляться при использовании row/colspans, я не использовал их в этом дизайне (поскольку у меня были проблемы с ними в прошлом). Я также попытался установить высоту как для левого, так и для правого столбцов. После дополнительных исследований я пришел к выводу (как я читал в другом месте), что, поскольку это такой длинный EDM (~ 3000 пикселей), средство визуализации слов на самом деле пытается вставить разрыв страницы! В итоге я увеличил промежутки между продуктами справа, чтобы смягчить нежелательные пробелы слева. Я не забуду отметить эту ошибку на будущее! - person tiltos; 13.04.2011
comment
Вау... больше дерьма, которого я не ожидал. Спасибо за информацию, и вам, вероятно, следует сообщить об этом команде офиса. Не то чтобы в последнее время они делали нам какие-то одолжения, но кто знает... следующим рендерером может стать ie9! :) - person Sajid; 14.04.2011