Outlook 2010 и таблицы HTML - PullRequest
Новая
       2

Outlook 2010 и таблицы HTML

5 голосов
/ 04 апреля 2011

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

Вот простой пример: 

<table cellpadding="0" cellspacing="0" id="outlookHack" 
   style="table-layout:fixed; border: 0; background-color: #1E6C9D; 
          background-image: url(http://www.komix.cz/upload/img_bg.png); 
          background-repeat: repeat-y; margin-top: 0px; margin-bottom: 0px; 
          padding: 0px; margin-left: auto; margin-right: auto; 
          text-align: center;width: 620px;" width="620">
<tr>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
  <td  width="600" style="width: 600px; background:ihnerit;" height="10"></td>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
<tr>
<tr>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
  <td  width="600" style="width: 600px; background: white;">some content...</td>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
<tr>
</table>

Проблема в том, что левый и правый столбцы должны иметь фиксированный размер 10px, но в Outlook 07/10 они отображаются как +/- 5px.

1 Ответ

3 голосов
/ 04 апреля 2011

ПОЦЕЛУЙ - будь проще (глупо)

Outlook 07-present использует движок рендеринга Word, который в основном IE (который тупой) и дальше не работает.Это заставляет вас вернуться к стандартам HTML 1 и действительно ограничивает то, что вы можете сделать.Для начала, в основном, отказаться от сложного CSS.Он может быть использован (in-line), но большая его часть не работает.Посмотрите этот документ о совместимости

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

Теперь, как решить вашу проблему с заполнением?Вы можете использовать cellpadding, чтобы добавить пространство, но это иногда имеет нежелательные последствия для областей, которые вы не хотите заполнять.Некоторые люди используют вложенные таблицы для обеспечения необходимого заполнения, используя внешние для управления макетом страницы и внутренние таблицы для управления абзацем.Обратите внимание, что поля также поддерживаются в соответствии с документом, поэтому вы можете использовать поля в абзацах, переставляя левый и правый столбцы по 10 пикселей в пользу абзаца с полями по 10 пикселей.

Кроме того, обратите внимание, что следует избегатьлюбой сокращенный CSS, т.е. border:1px solid #000

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

...