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

Question

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

bri*_*ris 3 css clear css-float internet-explorer-7

我有四个div元素飘到左边.第三个div被清除.
在Firefox和Chrome中,元素按预期定位:第一个和第二个divs彼此相邻,并且在第三个和第四个divs 之上,它们也彼此相邻.
另一方面,IE7将第四个div与第一个和第二个divs 相邻,第三个与第三个相邻div.

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

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

编辑:在Nazgulled"解决"问题之后,我已经使示例代码稍微复杂一些(请参阅注释).现在有四个div而不是三个,第三个div被清除而不是第二个.

这是完整的源代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

以下是Chrome中的内容:

这是IE7中的样子:

Answer 1

Ric*_*ral 5

我不知道这是否能解决您的真正问题,但我修复了您的样本:

从div中删除float属性
从#divtwo中删除clear属性
添加float:left到#divtwo和#divthree

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

归档时间：	16 年，9 月前
查看次数：	4554 次
最近记录：	6 年，8 月前