Электронная почта HTML не отображается правильно в Outlook 2007

Через много времени я занялся исследованиями. Я все еще могуне могу найти ответ.

У меня есть HTML, который показывает неправильную ширину в моих таблицах. Вот ссылка на HTML письмо:https://tagwebstore.com/email/tag-email-10percentmore.html и вот скриншот того, как это выглядит в Outlook 2007:

Основная проблема - нижняя зона. Ссылка html-письма отображает его правильно. Я понятия не имею, что еще делать здесь. Вот мой код для нижней части, с которой у меня проблемы:


    
       
    
    
       
      
          
            <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;">
          
          
            
                
                  
                  
                      
                        We’ve been using TAG for a while and we love TAG – 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.
                      
                      
                        Sirron Brown, Marketing Director<br>
                          Excell Home Care and Hospice, Oklahoma
                      
                    
                  
                
              
          
          
            <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57">
          
        
       
    
  

   

  

  
    
       
    
    
       
      
          
            <a href="mailto:[email protected]" style="color:#000000; text-decoration:none;">[email protected]</a>      |      866.232.6477
            Follow us on Twitter & YouTube
            <a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0"></a><a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0"></a>
          
        
       
    
    
       
    
  

   

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

 Alex Kittavong20 февр. 2013 г., 19:43
Вау, это выглядит именно то, что мне нужно. Спасибо, что нашли время, чтобы проверить это для меня!
 Alex Kittavong20 февр. 2013 г., 19:42
Я использую Infusionsoft для запуска этих почтовых кампаний. Я'использую Mailchimp 's инспектор входящих сообщений для просмотра предварительного просмотра, но требуется много времени для его обработки во всех различных почтовых клиентах.
 Alex Kittavong20 февр. 2013 г., 19:26
В самом деле? Перспективы моих коллег на 2007 год показывают, что это действительно не в порядке. Тот'ее скриншот она взяла для меня. Будет ли это компьютерная вещь?
 Matt Coughlin20 февр. 2013 г., 19:16
Я протестировал полный исходный код по указанному выше URL-адресу в Litmus, и он отлично работал в Outlook 2003/2007/2013.
 Matt Coughlin20 февр. 2013 г., 19:32
Как вы это тестируете? Если ты'просто вставляя исходный код в Outlook и отправляя его по почте, Outlook может повредить код. Litmus.com довольно надежный. Конечно, у меня нетя проверил код, но так как в Litmus он отображается нормально, яЯ думаю, что тампроблема в том, как этопроверяется.
 Matt Coughlin20 февр. 2013 г., 19:40
Вот'Вот скриншот тестирования в Outlook 2007 с помощью Litmus:s3.amazonaws.com/resultcaptures/...I»

Ответы на вопрос(2)

Решение Вопроса
о радость HTML-писем

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

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

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

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

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

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

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

http://pastie.org/6250834

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

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

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

 

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

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

 Pebbl21 февр. 2013 г., 07:09
@ Хороший момент в пояснении, я использовал в оформлении BR (не форматирование текста). Я определенно должен добавить неT использовать Ps.
 Matt Coughlin21 февр. 2013 г., 17:18
Какие'Проблема с курсивом?
 B Seven10 янв. 2014 г., 02:53
Огромное спасибо. Вы помогли мне не сойти с ума тоже. FWIW, ваши правила дали мне идею: так как это раздражает перекодировать, чтобы избежать colspans, я завернул каждый <TR> в <стол>, Столы всегда выстраиваются для меня в почтовых клиентах, и я тестирую с Litmus. Это упрощает код и позволяет мне удалять colspans без перестройки HTML. Я получил странное поведение из Outlook из-за colspans, но в строке после использования colspan.
 Pebbl16 окт. 2013 г., 01:18
@mikeTheLiar Приветствия, хе, да - у меня было много кошмаров со странностями, прежде чем я сделал это правилом; Это'Обидно, хотя, они, конечно, делают расположение таблиц намного проще! Рад, что мой ответ помог ..
 John21 февр. 2013 г., 17:33
@pebbl Я использую .png 'исключительно - возьмите этот Lotus Notes! Что касается colspans, когда вы пересылаете письмо из Outlook, оно создает большие промежутки между таблицами благодаря переносу Outlook

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

 John20 февр. 2013 г., 19:51
использовать br 'с, они более последовательны, чем р 's.
 MikeTheLiar15 окт. 2013 г., 23:44
+1 за то, что никогда не использовал rowspan или colspan - я просто потратил час, пытаясь выяснить проблему, вызванную rowspan. К счастью, я нашел этот ответ, прежде чем полностью сошел с ума.
 John21 февр. 2013 г., 17:29
@pebbl Я не знаюбеспокоиться о старых Lotus Notes. Из моих тестов они составляют около 0,2% подписчиков, хотя каждый список отличается. Кроме того, col и rowspans всегда отлично работали для меня.
 Alex Kittavong20 февр. 2013 г., 19:46
Вау, я действительно ценю это. Это'Очень полезно увидеть, где могут быть проблемы. Я продолжаю получать смешанные ответы о <ш>потому что теперь outlook.com и hotmail.com не будут поддерживать нижнее поле для <p> больше. Это было объявлено в прошлом месяце. Я также читал, что использование спейсера изображений неРекомендуется также, в основном из-за скорости загрузки и количества спама. Письма в формате HTML всегда вызывают у меня головную боль. Я'я делаю их уже 3 года, а яЯ все еще узнаю о них. Спасибо за помощь, я буду использовать это, чтобы помочь найти проблему. :)
 Pebbl21 февр. 2013 г., 17:32
@ Джон уверен, что ... как я сказал в начале своего поста, я в последний раз создавал электронное письмо более 2 лет назад, так что я ожидал, что все пойдет дальше. Я просто рассказал, каковы были мои правила. К сожалению, когда я разрабатывал почту, у многих наших клиентов была эта конкретная версия Lotus Notes (игнорируя тот факт, что весь остальной мир ушел). Скорее раздражает.
 Pebbl21 февр. 2013 г., 17:27
@MattCoughlin хе, ах, чтоЕще одна проблема Lotus Notes 6.5.4. У него было много проблем с определенными шрифтами при рендеринге курсивом, для одного у него не было возможности сглаживания (некоторые буквы были действительно неразборчивы), и для двух целых слов они просто исчезали или обрезались :)
 Alex Kittavong21 февр. 2013 г., 17:26
Это'с очень помогли и с ответом ниже также. Можно'Получить техническую с HTML письма. Прогноз мой худший кошмар. Спасибо еще раз за помощь. Я все еще работаю над поиском проблемы, но, честно говоря, проблема заключается в клиентском компьютере. @MattCoughlin, это выглядело хорошо в его перспективе 2007 года. Я не хочу винить кого-то в этом »с компьютером, но это определенно может быть фактором.
 Pebbl09 июл. 2018 г., 23:31
К сожалению я нене могу передать его прямо сейчас, ям от моих резервных копий. Но посмотрим, смогу ли я найти его и заново загрузить где-нибудь. Didn»Я не понимаю, что Пасти ушел.
 Jake8815 июн. 2018 г., 17:40
Ссылка на ссылку в ответе мертва. Если бы это могло быть обновлено, это было бы оценено, иначе Ваши подробные предложения удивительны.
 Pebbl21 февр. 2013 г., 07:12
@ Алекс не беспокойся, надеюсь, что-то из вышеперечисленного было полезным! Да, когда я впервые начал создавать электронную почту в формате HTML, я так и не понял, насколько это будет сложно - определенно сложнее, чтобы многочисленные почтовые клиенты были довольны, чем веб-браузеры в наши дни. Это становится еще более неловким, если вы начинаете создавать адаптивные макеты: S
 Pebbl21 февр. 2013 г., 07:24
@AlexKittavong Oh & Что касается проставок, ябуду придерживаться их лично, если клиенту нужен требовательный вид требует поддержки старых почтовых клиентов. Чтобы обойти проблемы со спамом, просто нене используйте их, и убедитесь, что у вас есть несколько с разными именами. Если ваша компания беспокоится о добавленном размере загрузки (вряд ли что-то для проставок), то им нужно признать, что их дизайн не будет выглядеть так хорошо в определенных местах. У вас нет выбора, кроме как использовать пробел, если вы хотите, чтобы пространство было меньше высоты текста по умолчанию и поддерживать старые клиенты. Это'Во всяком случае, это не ключевой вопрос ... вы можете определенно жить сNBSP;
 John21 февр. 2013 г., 17:27
@AlexKittavong Вы неМне действительно нужно использовать спейсерные изображения в электронной почте. В Outlook большинство пробелов возникают, когда таблицы отделяются от пересылки электронной почты (но это еще одна проблема!). Вы можете использовать отступы на или создать пустой роликс s (как ваш пример кода), чтобы он нет коллапс. Для фальшивых отступов над и под блоками текста используйте <br> а также<br>  соответственно. Если  отсутствует в начале и в конце текстового блока (где ячейка таблицы открывается / закрывается) Outlook сворачивает его. Просто используйте<br><br> между абзацами.

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


    
       
    
    
       
      

        
          
            
              <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;">
            
          
          
            
              
                
                  
                  
                  
                    
                      
                        We’ve been using TAG for a while and we love TAG – 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.
                        
                      
                      
                        Sirron Brown, Marketing Director<br>
                          Excell Home Care and Hospice, Oklahoma
                      
                    
                  
                  
                  
                
              
            
          
          
            
              <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;">
            
          
        

      
       
    
  

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

  
    
       
    
    
       
      
        
          
            
              <a href="mailto:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a>      |      866.232.6477
            
            
              Follow us on Twitter & YouTube
            
            
              <a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;"></a>
            
            
              <a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="2,1" border="0" style="display:block;"></a>
            
          
        
      
       
    
    
       
    
  

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

 Alex Kittavong27 февр. 2013 г., 20:05
Правда, не так запутанно.
 Alex Kittavong25 февр. 2013 г., 16:09
да, это тоже сработало. Я все еще пытаюсь выяснить, почему мои ширины были отключены, когда я рассчитал их правильно. Я вижу, что вы использовали 100% в качестве ширины в <TD> вы используете в качестве контейнера. Лучше сделать это так, чем указывать точную ширину?
 John21 февр. 2013 г., 17:36
@ Алекс Это сработало? Или ты это понял?
 John25 февр. 2013 г., 20:21
он, вероятно, будет работать в обоих направлениях, но на одно место меньше нужно устанавливать ширину для того, что вы хотите, такой же ширины, как его родитель.

Ваш ответ на вопрос