Outlook 07 2 колонки гибкая компоновка - PullRequest
Новая
       19

Outlook 07 2 колонки гибкая компоновка

1 голос
/ 16 сентября 2008

Я пытаюсь создать гибкий макет с двумя столбцами для электронной почты, который работает в 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

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

1 Ответ

2 голосов
/ 16 сентября 2008

В 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 / клиенты / Microsoft-прогноз-2007 /
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

...