Outlook 07 2栏灵活的布局
我正在尝试创建一个两栏灵活的电子邮件布局,它可以在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上
由于我整天都在搜索,因此在此问题上的任何帮助都将不胜感激,我唯一能找到的就是固定宽度的答案,但是没有什么是灵活的。
预先感谢大家的回答
卡梅伦
解决方案
回答
在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
以下是有关支持和不支持的内容的更多详细信息:
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