Outlook 07 2栏灵活布局

发布于 2024-07-05 11:40:49 字数 1289 浏览 9 评论 0原文

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

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

原文

I am trying to create an email two column flexible layout, which works in outlook 07, i have created a successful version in outlook 03, hotmail, gmail, yahoo and aol, in both IE and Mozilla Firefox, however when testing in outlook 07 it strips out my float left css.

What I would like is a layout that has a photo on the left and text on the right about the photo, whens its full screen however when the screen size is reduced, for example on a mobile phone, for the text to move under the photo. When the screen is big I would like it to move back to the two column appearance.

<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 renders the html like i want it, but IE does not, currently on IE 6

Any help on this matter really would be much appreciated as I have been searching all day and the only thing I can find is fixed width answers but nothing that is flexible.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅暮の光 2024-07-12 11:40:49

在 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

With Outlook 2007, Microsoft decided to stop using the IE engine for rendering the HTML, and use the Word engine instead.

This means you are severely restricted with the styling you can apply if you need to make your emails work for Outlook 2007 users.

Unfortunately, float is one of the features that Outlook 2007 does not support - for column layout you are forced to use tables. :(

Note, to get IE working better, make sure you have a valid DOCTYPE so it does not revert to Quirks Mode.
The simplest DOCTYPE that works best across all user agents is the proposed HTML5 DOCTYPE, which is simply:

<!DOCTYPE html>

That's all there is to it - none of the other stuff is needed.
(Note, whilst it works in browsers, the W3 validator will complain about this doctype - you can use the override DOCTYPE feature if you want to use the validator.)

Back to what CSS you can use in emails...
There is a PDF showing which CSS attributes are supported across different clients here:
http://www.campaignmonitor.com/reports/Guide_to_CSS_Support_in_Email_2007.pdf

And here are some further details about what is and isn't supported:
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

回复收藏 0 原文

~没有更多了~