Outlook 07 с гибкой компоновкой в ​​2 столбца

Я пытаюсь создать гибкий макет электронной почты с двумя столбцами, который работает в Outlook 07, я создал успешную версию в Outlook 03, hotmail, gmail, yahoo и aol как в IE, так и в Mozilla Firefox, однако при тестировании в Outlook 07 это удаляет мой поплавок влево css.

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

<div>
   <div style = "float:left;width:230px;">
      <a href = "http://www.google.co.uk" target = "_blank"><img src = "http://www.maip.com/media/images/Google%20Logo.jpg" border = "0" width = "230" height = "150" style = "margin-bottom:5px;"></a>
   </div>
  <div>
    <h4>Test, Test, Test</h4>
    <p style = "margin:0 0 0px 0;">Test</p>
    <p>Test text test text kfjhsdkhfjkdshjkf fjsdlfkjsdljflsdjfl sd dfkljflsdjfkljsdlkfjklsdjf dfksdjfkljsdklfjklsdf sdfjsdljfldjfklsd,f lkl sdjkl jdkl jdkljfdkljfklsdjfklj ldk jlksd  Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text  
    <a href = "http://www.google.co.uk/" target = "_blank" >Read more</a>.</p>
    <p>Arrange to view this property</a></p>
  </div>
</div>

Mozilla отображает html так, как я хочу, но IE этого не делает, в настоящее время в IE 6

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
3 294
1

Ответы 1

В Outlook 2007 Microsoft решила отказаться от использования движка IE для рендеринга HTML и вместо этого использовать движок Word.

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

К сожалению, float - одна из функций, которые Outlook 2007 не поддерживает - для размещения столбцов вы вынуждены использовать таблицы. :(


Обратите внимание: чтобы IE работал лучше, убедитесь, что у вас есть действующий DOCTYPE, чтобы он не возвращался в режим Quirks. Самый простой DOCTYPE, который лучше всего работает со всеми пользовательскими агентами, - это предлагаемый HTML5 DOCTYPE, который просто:

<!DOCTYPE html>

Вот и все - ничего другого не нужно. (Обратите внимание: пока он работает в браузерах, валидатор W3 будет жаловаться на этот тип документа - вы можете использовать функцию переопределения DOCTYPE, если хотите использовать валидатор.)


Вернемся к тому, какой CSS можно использовать в электронных письмах ... Здесь есть PDF-файл, в котором показано, какие атрибуты CSS поддерживаются разными клиентами:
http://www.campaignmonitor.com/reports/Guide_to_CSS_Support_in_Email_2007.pdf

А вот еще несколько подробностей о том, что поддерживается, а что не поддерживается:
http://www.email-standards.org/clients/microsoft-outlook-2007/
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

Другие вопросы по теме