Question

我似乎对IE6有点问题，通常我会放弃对IE6的支持，但我正在进行的项目有可能会有很多人使用IE6访问该网站。如果您有IE6，并且想要查看问题，请使用我的主页链接。

基本上div＃内容低于div＃left。我尝试了Robert Nyman方法但是没有用。任何人都知道其他方法吗？

<html>
<style type="text/css">
#wrapper{ width:980px; margin:auto; background-color:#fff }
#header{ width:980px; position:relative }
#middle{ width: 980px; padding:20px; overflow:hidden; clear:both }
#left{ float:left; width:200px }
#main{ width:740px; margin: 0px 0px 0px 210px }
#content { width: 480px; min-height: 400px; float:left }
#right{ float:left; width:240px; margin: 0px 0px 0px 10px }
#footer{ clear:both; width:980px; margin:auto; padding:20px 0 }
</style>

<body>
<div id="wrapper">
    <div id="header">

    </div>
    <div id="middle">
        <div id="left">

        </div>
        <div id="main">
            <div id="content">

            </div>
            <div id="right">

            </div>
        </div>
    </div>
</div>
<div id="footer">

</div>

Answer 1

从第一眼可能的原因很容易看出（我甚至没有潜入问题）：

1）始终使用DOCTYPE！如果没有它，你将永远不会使用crossbrowser普通难度代码。

2）为了制作这样的东西，尝试更频繁地使用浮动属性！

3）我很惊讶看到宽度为980px的块;和填充：20px;应该放在块中：宽度：980px;填充，包含在宽度 - 是过去!!

4）#right有属性：float：left; margin-left：10px; - 在这种情况下，IE6使margin-left = 20px - 这是非常着名的bug。添加到此块此属性：display：inline;并且它会好的（所以，原因不在于填充，而是在边缘）

不要忘记阅读标准和建议！

Answer 2

我在内容div中添加了一个style="float: left; clear: none;"，并修复它以使中间div和右div在同一平面上，但两者都被推到了左div的高度。

为什么要将内容div和右div包装成包装div但是将左侧div分开？这可能是相关的。

Answer 3

首先，您需要一个合适的doctype，以便页面以标准合规模式呈现。如果它以怪癖模式呈现，IE会使用不同的盒子模型来改变大多数元素的大小。

是main还是content div下降了？如果它是main div，您可以将它漂浮在left div旁边。

您可能需要调整元素的大小。有时，IE6需要三个额外的空间像素来适应另一个元素中的元素。

Answer 4

我解决了这个问题！

我使用条件语句并将填充从20更改为10：

<!--[if lte IE 6]>
<style type="text/css">
    #middle{ width: 980px; padding:10px; overflow:hidden; clear:both; }
</style>

IE6 Float Drop

4 个答案: