Question

我有四个div元素浮动到左边。第三个div被清除在Firefox和Chrome中，元素按预期定位：第一个和第二个div彼此相邻，位于第三个和第四个div之上，它们也彼此相邻。
另一方面，IE7将第四个div与第一个和第二个div相邻，第三个div。

我知道我可以通过在第二个br之后添加div元素来修复它，但如果我不需要，我宁愿不编辑标记。是否有更优雅的方法来解决问题？

我一直在尝试谷歌修复一段时间，但没有找到一个，考虑到问题的基本原因，这是相当令人惊讶的。也许我错过了一些明显的东西，是否有一个参考网站列出了像这样的简单的CSS问题，还是我对基本的CSS一无所知？

编辑：在Nazgulled“解决”问题后，我使示例代码稍微复杂一些（请参阅注释）。现在有四个div而不是三个，第三个div被清除而不是第二个。{/ p>

以下是完整的源代码：

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

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

以下是Chrome中的内容：

以下是IE7中的内容：

Answer 1

我不知道这是否能解决您的真实问题，但我修复了您的样本：

从 div

float

从 #divtwo

清除

将 float：left 添加到 #divtwo 和 #divthree

这使它在Firefox和IE 7（我测试的浏览器）中看起来像你的chrome样本。

Answer 2

几个月后......

我放弃了尝试用CSS单独解决这个问题。这是一个IE7错误，如果不触及HTML，就无法避免。

这种浮动模式的最终应用是一种形式，其中两个div是输入元素，另外两个div是它们对应的标签。该模式以大型形式多次使用，我真的很想找到一个优雅的CSS解决方案。

我最终使用Object Oriented CSS Framework并使用额外的div包装所有元素，以便创建所需的布局，正如OOCSS所规定的那样。这是将我的灵魂从IE7的CSS地狱中拯救出来的唯一方法，一旦完成初始布局，OOCSS就不那么糟糕了。

事实上，一般的答案是，当你真的不知道你在用CSS做什么时，这就是你提出的那种问题。如果你必须在蓝色的月亮中创建一个复杂的布局，那么你可能不知道你在做什么;和我提出这个问题的情况一样。

虽然IE7无法正确呈现CSS，但我的范围也是错误的。 CSS并不是一个天真的程序员可以实现的最终布局语言，而CSS并不是真正独立于HTML的结构。在我真正花时间学习CSS的基础知识的时候，我再次选择使用OOCSS框架来更简单的方法。

唉，这是截止日期的结果。

Answer 3

我不确定你的最终目标是什么，但我建议将所有四个<div>括在容器元素中并对其应用宽度，然后从{{1}中删除clear样式}}。这样做可以让#divthree和#divthree移到#divfour和#divone以下而不清除它们：

#divtwo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>IE Float Test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #divone, #divtwo, #divthree, #divfour { width: 100px; height: 100px; color: white; font-size: 3em; float: left; } #divone { background-color: red; } #divtwo { background-color: blue; } #divthree { background-color: green; } #divfour { background-color: purple; } #container { width: 200px; zoom: 1; } </style> </head> <body> <div id="container"> <div id="divone">one</div> <div id="divtwo">two</div> <div id="divthree">three</div> <div id="divfour">four</div> </div> </body> </html>上的zoom属性是必要的，以避免IE6/7 Escaping Floats Bug。

如果上述解决方案不可行，您可以在#container之后添加<br>或<div>样式#divtwo：

clear: left;

这是a floated page layout example on westciv.com中使用的技术。

Answer 4

尝试添加：

display:inline-block;

在#divtwo中。如果可行，我当然会为IE7添加一些条件评论

如何在IE中修复这个简单的CSS浮动问题？

4 个答案: