Несовместимые пробелы ниже элементов TD в таблицах в электронной почте HTML в Outlook (2007 и 2010)

Question

Я исследовал эту проблему, обнаружив в Интернете множество предлагаемых исправлений, но ничего не работает.

Проблема заключается в разрыве между конкретным элементом TD в таблице в электронном письме, которое я разрабатываю.,Это отображается только в Outlook 2007 и 2010.

Вот ссылка на скриншот проблемы

В боковой панели справа должно бытьнет пробела между «Уровнем 2» и тонким прямоугольником с закругленными углами над ним.

Вот код для вложенной таблицы, которая создает синее поле:

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

Как видите,Я удалил все пробелы, как это было предложено в одном из найденных мной обходных путей.Я также вставил стиль 'line-height: 0; font-size: 0' в элемент TD и стиль 'display: block' в само изображение, снова все предложенные обходные пути.Ничто из этого не имело никакого значения.

Эта проблема не возникает ни в одном другом почтовом клиенте или браузере.

Пожалуйста, помогите!

Answer 1

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

Сохраняйте структуру таблицы, но попробуйте следующие дополнения:

• Добавьте valign="bottom" в ячейку td, содержащую box_dark_top.gif и valign="top" в следующие две ячейки
• Для каждого изображения установите CSS как style="display:block;margin:0;padding:0"

• Использовать встроенный CSS, а не внутренний

  <table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
  <tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
  <tr>
      <td valign="top" class="box_dark">
          <h2>Level 2<br /><span class="white">Care Assistants</span></h2>
          <h2>Level 3<br /><span class="white">Senior Carers</span></h2>
          <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
      </td>
  </tr>
  <tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
  

Answer 2

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

Answer 3

Установите высоту TD, а также любой другой TD, который должен иметь фиксированную высоту:

<td valign="bottom" height="10" width="200">

* Вы также должны использовать ширину ВСЕХ TD в электронной почте.

Answer 4

Outlook 2007 и выше использует Word для визуализации HTML. Вот статья об этом со ссылками на более решительные статьи и веб-сайты.

Может быть, вы могли бы попытаться создать свое сообщение в Word (или в самом Outlook)? Конечно, в нормальном почтовом клиенте он может отображаться некорректно.