Question

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

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

Answer 1

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

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

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

以下是有关支持和不支持的更多细节：
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

Outlook 07 2列灵活布局

1 个答案: