Question

我有一个非常简单的布局，看起来不正确。我已经搞乱了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>

Answer 1

您的页面在Internet Explorer 10中默认工作正常。但我确实看到了您在Internet Explorer 9中提到的问题。这是由您在Quirks模式下加载页面引起的。插入以下Doctype以更正此问题：

<!DOCTYPE html>

将<html>放在第一行之前。这可以解决您的问题。

您可以使用F12开发人员工具将页面置于标准模式，从而快速进行测试。按键盘上的F12以显示开发人员工具。在右上角，单击“文档模式：怪癖模式”并将其更改为“Internet Explorer 9标准”。

简单的CSS布局在IE中包装图像但不包括FF或Chrome

1 个答案: