我有一个非常简单的布局,看起来不正确.我已经搞乱了Firebug Lite和IE Developer Toolbar,但是在这种情况下,为什么右图像在左图像下方包裹起来似乎无法归结为什么.这是我为调试目的而简化的问题的链接. http://tunetra.de/test/layout.html
我也将在下面通过我的HTML.
<html>
<head>
<style>
#container
{
margin: 0px auto;
width: 1000px;
background: #fff;
}
#main
{
text-align: left;
}
</style>
</head>
<body style="text-align:center;">
<div id="container">
<div id="header">
<img src="img/left_image.png" style="width: 272px; height: 90px; float: left;position: relative;">
<div style="float: right;position: relative;background-color: #fff;width: 728px;height: 90px;">
<img src="img/right_image.png" style="">
</div>
</div>
<div id="main">
Lorem Ipsum Bla<br/> Bla<br/> Bla
</div>
</div>
</body>
</html>
在Internet Explorer 10中,您的页面默认工作正常.但我确实看到了您在Internet Explorer 9中提到的问题.这是由您在Quirks模式下加载页面引起的.插入以下Doctype以更正此问题:
<!DOCTYPE html>
将它<html>放在第一行之前.这可以解决您的问题.
您可以使用F12开发人员工具将页面置于标准模式,从而快速进行测试.按键盘上的F12以显示开发人员工具.在右上角,单击"文档模式:怪癖模式"并将其更改为"Internet Explorer 9标准".