Outlook сворачивание ячеек таблицы в электронных письмах HTML - PullRequest
Новая
       15

Outlook сворачивание ячеек таблицы в электронных письмах HTML

2 голосов
/ 17 июня 2011

Я сталкивался с этой проблемой и до сих пор не смог найти ее решения. С помощью электронной почты в формате html я обнаружил, что в некоторых программах Outlook он разрушает ячейку. Оба 2007/2010 Например: 

<tr>
    <td width="10"><img></td>
    <td width="80">Copy</td>
    <td width="10"><img></td>
</tr>

В результате Outlook игнорирует ширину ячейки среднего столбца. Также не имеет значения, использую ли я CSS для ширины. 

<tr>
    <td style="width:10px;"><img></td>
    <td style="width:80px;">Copy</td>
    <td style="width:10px;"><img></td>
</tr>

Это имеет те же результаты.

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

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

Ответы [ 2 ]

0 голосов
/ 18 марта 2015

Я столкнулся с этой проблемой в Outlook 2013 для Windows.Он отлично работал в Outlook для Mac (и Gmail, и почти во всех других современных почтовых клиентах), но в Outlook 2013 для Windows он полностью разрушил бы все.

Решение было простым: НЕ вставляйте px, если вы объявляете ширину в пикселях (за исключением встроенных стилей).Вы должны быть действительно старой школы.Вот мой окончательный (рабочий) код: 

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>

    <td width="1" align="left" valign="top" bgcolor="#ffffff"><img src="#"></td>
    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 1</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none; text-decoration: none;" href="#">SECTION 2</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 3</a></span></td>

    <td width="149" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 4</a></span></td>

    </tr>
    </table>
0 голосов
/ 18 июня 2011

Можете ли вы предоставить более обширный пример кода с целой таблицей, а не с одной строкой? Поможет дать подсказку, почему это происходит.

В любом случае, в Outlook мне подходит то, что в таблицу добавляется верхняя строка, которая приводит ширину столбцов к точным значениям высоты. Прозрачный GIF 1x1 с шириной, установленной в дополнение к ширине ячеек таблицы, похоже, работает как метод "грубой силы", который даже Outlook слушает: 

<table>
  <tr>
    <td width="10" height="1"><img width="10" height="1" /></td>
    <td width="80" height="1"><img width="80" height="1" /></td>
    <td width="10" height="1"><img width="10" height="1" /></td>
  </tr>

и затем строки под ним, которые соответствуют ширине столбца этой верхней строки.

...