Question

我通常使用此代码

div#wrapper{width:900px; margin: 0 auto;}

div#header{float:left; width: 900px;}

div#sidebar{float:left; width: 300px;}

div#content{float:left; width:600px;}

div#footer{float:left; width: 900px; clear:both;}

我有这个标记

<div id="wrapper">
 <div id="header"></div>
 <div id="sidebar"></div>
 <div id="content"></div>
 <div id="footer"></div>
</div>

以某种方式在IE6中布局中断：整个布局浮动到左边！

关于这个的任何知识？

修改布局有效;中心在IE7和8中工作（但在怪癖中断）

修改这是它在怪癖模式下的样子 alt text http://www.freeimagehosting.net/image.php?2646ed5285.png

Answer 1

您需要声明一个doctype ..

任何doctype都可以..

（检查）

Answer 2

尝试使用这种样式，除了侧边栏之外没有理由浮动任何东西，只会增加更多复杂性来混淆IE6。

div#wrapper{width:900px; margin: 0 auto;}
div#header{width: 900px;}
div#sidebar{float:left; width: 300px;}
div#content{margin-left: 300px; width:600px;}
div#footer{width: 900px; clear:both;}

Answer 3

就像盖比说的那样，doctype可以解决这个问题。在文档的顶部尝试一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE6中心固定宽度布局中断

3 个答案: