HTML-адрес электронной почты не отображается правильно в Outlook 2007

Ответ 1

о радость html-писем

Существует множество правил, которые вы должны соблюдать при работе с электронной почтой на основе HTML, особенно когда у вас есть требовательные клиенты и идеальные пиксельные проекты, и я очень рад, что мне не приходилось работать над таким проектом на как минимум два года... Основная причина моей полной нелюбовь к практике заключается, прежде всего, в двух почтовых клиентах. Первое и все время хуже, чем Lotus Notes 6.5.4 (честно говоря, это уже более 10 лет... но все же!), И все время второго худшего (ие), они даже не лучшие, будучи плохими, Outlook 2007 и 2010!

Тот, кто думал, что было бы неплохо использовать Microsoft Word WYSIWYG HTML Engine для рендеринга HTML-писем в Outlook 2007 и 2010, должно быть, было безумным, ленивым, потерянным или когда-либо слегка смущенным (удалите, если необходимо). Это не создает проблем для разработчиков для разработчиков, как правило, со случайными и необъяснимыми вычислениями размеров или проблемами заполнения.

Взято из моего блога http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html

Проще говоря, я не завидую вам:)

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

• Никогда не используйте colspans или rowspans.
• Всегда устанавливайте правильные размеры для ваших таблиц и ячеек.
• Используйте spacer gifs вместо &nbps;.
• Всегда указывайте правильные размеры изображений и никогда не масштабируйте изображения вверх или вниз.
• Всегда добавляйте style="display:block;" к изображениям.
• Избегайте использования divs.
• Если вы хотите покрасить ссылки, поместите стиль в span как дочерний элемент в тег a.
• Не используйте курсив.
• Не используйте BR для компоновки, всегда используйте таблицы.
• Используйте BR в тексте, а не Ps (чтобы избежать проблем с пространственным запасом и абзаца полностью игнорируются).

Поскольку чистое количество писем, которые я использовал, оказалось нелепым, я разработал script, чтобы помочь мне в проверке размеров и других возможных ловушек. Если вы заинтересованы в его использовании, вы можете найти его здесь:

http://pastie.org/6250834

script можно добавить как обычный тег script или включить с помощью GreaseMonkey или что-то подобное (он был разработан для работы с Firefox, но я не вижу причин, почему он не должен работать в другом месте). Из-за того, как я использовал свои электронные письма, он будет включен только в том случае, если выполняются следующие условия:

• Существует внешняя таблица упаковки, в которой установлен width="100%", используемый для центрирования фактического содержимого электронной почты.
• или... есть внешний элемент (таблица или div), который имеет id="base".

Я передал ваш HTML через него, и изображение ниже - это результат, имеет смысл, когда у вас есть фактическая страница, потому что вы можете нависнуть над каждым граничным элементом, и это даст вам общее представление о том, что проблема (либо это, либо вы можете просто проверить элемент непосредственно с Firebug или аналогичным).

Итак, из проверки выше, кажется, у вас есть несколько проблем, которые необходимо устранить, я бы сказал, что наиболее важными из них являются избавление от rowspans и colspans (они всегда вызывают проблемы в Outlook) и убедиться, что все ваши размеры правильны. Как только вы устраните эти проблемы, вы можете увидеть значительное улучшение, но опять же, возможно, нет, нет никаких определений в опасной жизни создания электронной почты HTML...

Надеюсь, что это поможет.

Ответ 2

Попробуйте это для своей верхней таблицы:

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">

        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
            </td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="575">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="28">
                  </td>
                  <td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
                        </td>
                      </tr>
                      <tr align="right">
                        <td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table>
                  </td>
                  <td width="28">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
            </td>
          </tr>
        </table>

      </td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

и это для вашего дна:

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
              <a href="mailto:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477
            </td>
            <td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
              Follow us on Twitter &amp; YouTube
            </td>
            <td valign="middle" width="49">
              <a href="#" onclick="location.href='https://twitter.com/TAGhomecaremktg'; return false;"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" /></a>
            </td>
            <td valign="middle" width="53">
              <a href="#" onclick="location.href='http://www.youtube.com/TAGWebinars'; return false;"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" /></a>
            </td>
          </tr>
        </table>
      </td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

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