1

我正在尝试创建一个电子邮件两列灵活布局，适用于 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 上

由于我整天都在搜索，因此对此事的任何帮助都将不胜感激，我唯一能找到的是固定宽度的答案，但没有什么是灵活的。

4

1 回答 1

2

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

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

不幸的是，浮动是 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

于 2008-09-16T17:45:46.573 回答