Outlook 07 2列灵活布局答案

【问题标题】：Outlook 07 2 column flexible layoutOutlook 07 2列灵活布局
【发布时间】：2010-09-09 14:48:05
【问题描述】：

我正在尝试创建一个在 Outlook 07 中工作的电子邮件两列灵活布局，我在 IE 和 Mozilla Firefox 中的 Outlook 03、hotmail、gmail、yahoo 和 aol 中创建了一个成功的版本，但是在测试时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 上

任何关于此事的帮助都非常感谢，因为我整天都在搜索，我唯一能找到的是固定宽度的答案，但没有什么是灵活的。

【问题讨论】：

标签： html outlook office-2007

【解决方案1】：

在 Outlook 2007 中，Microsoft 决定停止使用 IE 引擎来呈现 HTML，转而使用 Word 引擎。

这意味着如果您需要使您的电子邮件适用于 Outlook 2007 用户，您可以应用的样式受到严格限制。

不幸的是，浮动是 Outlook 2007 不支持的功能之一 - 对于列布局，您不得不使用表格。 :(

请注意，要让 IE 更好地工作，请确保您有一个有效的 DOCTYPE，这样它就不会恢复到 Quirks 模式。最适用于所有用户代理的最简单的 DOCTYPE 是建议的 HTML5 DOCTYPE，它很简单：

<!DOCTYPE html>

这就是它的全部内容 - 不需要其他任何东西。（注意，虽然它在浏览器中工作，但 W3 验证器会抱怨此 doctype - 如果您想使用验证器，可以使用覆盖 DOCTYPE 功能。）

回到您可以在电子邮件中使用的 CSS... 这里有一个 PDF 显示不同客户端支持哪些 CSS 属性：
http://www.campaignmonitor.com/reports/Guide_to_CSS_Support_in_Email_2007.pdf

【讨论】：