Большой разрыв в таблице — Outlook 2010

Я работаю над несколькими электронными письмами для клиента, который использует Outlook 2010 версии 14 для ПК в своем офисе. Независимо от того, как создано электронное письмо, правая сторона таблицы выбивается наружу.

Например:
Электронное письмо №1:

http://screencast.com/ т/DLGfSTWFWfCB

Электронная почта № 2:

http://screencast.com/ т/ftgLlNW8

Это код: view-source:http://fortworth.dmlocal.com/main/index.php?action=viewsenthtml&id=95&ids=e9499cb22fd2fbaee560c877a2716fa0aab6880d

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

  • Взял все встроенные CSS
  • Убедитесь, что все отступы, интервалы между ячейками и границы установлены на ноль.
  • Указанная ширина для столов
  • Указанная высота и ширина для изображений
  • Убедитесь, что изображения имеют высоту и ширину, указанные в коде.
  • Сделал изображения jpg против png
  • Удалены все ненужные пробелы
  • Мой стол не более 23,7 дюймов в высоту

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

Любая помощь будет принята с благодарностью!


image html-table outlook html-email spacing
person user1607441    schedule 17.08.2012    source источник
comment
Outlook 2010 использует Word в качестве механизма рендеринга html, а механизм рендеринга Word (невообразимо) даже ХУЖЕ, чем IE6.   -  person Marc B    schedule 17.08.2012

Ответы (5)


arrow_upward
2
arrow_downward

Для таблиц HTML укажите width и height, используя атрибуты HTML, а не стили CSS. Современные версии Outlook игнорируют стили width и height.

Как уже упоминалось @MarcB, Outlook 2007/2010/2013 использует механизм рендеринга Word для рендеринга электронных писем. Предыдущие версии Outlook использовали механизм рендеринга IE. Этот сдвиг привел к значительным изменениям в структуре электронных писем в формате HTML.

Ниже приведен неполный список функций, не поддерживаемых Outlook 2007 и более поздних версий:

Стили CSS

  • плавать
  • позиция
  • отображать
  • ширина
  • высота
  • padding (не работает с тегами div и p)
  • background-image (работает только с тегом body)
  • изображение в стиле списка

HTML-атрибуты

  • альтернатива (изображение)
  • фон (таблица, тд, тд)
  • colspan, rowspan (th, td) (об этом есть противоречивая информация, но, похоже, она поддерживается, если не используется значение 0; однако часто рекомендуется вкладывать таблицы вместо использования colspan и rowspan)

Разное

  • Анимированные GIF-файлы
  • HTML-формы
person Matt Coughlin    schedule 18.08.2012

arrow_upward
1
arrow_downward

Попробуйте разместить />, чтобы закрыть тег изображения. Только это сработало для меня. Это проблема, полностью придуманная MS. Как будто это было недостаточно плохо раньше.

person zDavid    schedule 08.10.2012

arrow_upward
0
arrow_downward

Ответ @MattCoughlin верен, поскольку это код Outlook. Однако я бы также добавил, что Outlook действительно специфичен в отношении подсчета столбцов и строк.

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

person Dan Blows    schedule 18.08.2012

arrow_upward
0
arrow_downward

Я только что внес некоторые изменения в ваш код и поставил для вас скрипку для тестирования.

http://jsfiddle.net/YWnzc/135/

Но я не мог проверить, что я сделал в своем Outlook 2010, но я думаю, что в Outlook 2010 много ограничений.

http://fixoutlook.org/

Дайте мне знать, как это происходит.

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

person defau1t    schedule 19.08.2012

arrow_upward
0
arrow_downward

Что касается меня, то Outlook игнорировал ширину div, поэтому, если вы закодируете его так:

<div style="width:500px">
<table width="100%">
...
</table>
</div>

ширина таблицы будет увеличена до 100%, поэтому попробуйте вложить все элементы с фиксированной шириной в таблицы и установить fixed с помощью этих родительских таблиц (обратите внимание, что таблица также нуждается в стиле), например:

<table width="500px" style="width:500px">
<div style="width:500px">
...
</div>
</table>

это даст вам необходимую ширину

person ishubin    schedule 05.12.2012