3

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

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

一段时间以来,我一直在尝试在 Google 上进行修复,但还没有找到一个,考虑到这个问题看起来多么简单,这相当令人惊讶。也许我遗漏了一些明显的东西,是否有一个参考站点列出了像这样的简单 CSS 问题,或者我只是对基本 CSS 一无所知?

编辑:在 Nazgulled “解决”问题后,我使示例代码稍微复杂一些(见评论)。现在有四个divs 而不是三个,第三个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>

这是 Chrome 中的样子:
铬样品

这是 IE7 中的样子:
IE 示例

4

4 回答 4

5

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

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

这使它看起来像您在 Firefox 和 IE 7(我测试过的浏览器)中的 chrome 示例。

于 2009-01-25T05:07:44.143 回答
3

几个月后...

我放弃了尝试单独使用 CSS 来解决这个问题。这是一个 IE7 错误,如果不触摸 HTML,您将无法避免。

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

我最终最终使用了面向对象的 CSS 框架,并用附加的 s 包装了所有元素,div以创建所需的布局,正如 OOCSS 所规定的那样。这是将我的灵魂从 IE7 的 CSS 地狱中拯救出来的唯一方法,一旦你完成了初始布局,OOCSS 并不是那么糟糕。


事实上,一般的答案是,当你真的不知道你在用 CSS 做什么时,你会提出这样的问题。如果您必须千载难逢地创建一个复杂的布局,那么您可能不知道自己在做什么;就像我问这个问题时的情况一样。

尽管 IE7 确实无法正确呈现 CSS,但这也是我的一个错误范围的情况。CSS 不是一个天真的程序员会认为的终极布局语言,CSS 也不是真正独立于 HTML 的结构。当我实际上应该花时间学习 CSS 的基础知识时,我再次选择了使用 OOCSS 框架来采取更简单的方法。

唉,这就是最后期限的后果。

于 2009-10-04T07:06:17.637 回答
2

我不确定您的最终目标是什么,但我建议将所有四个<div>s 包含在一个容器元素中并为其应用宽度,然后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属性 on#container是避免IE6/7 Escaping Floats Bug所必需的。

如果上述解决方案不可行,您可以在 style之后添加一个<br><div>之后:#divtwoclear: left;

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

这是在 westciv.com 上的浮动页面布局示例中使用的技术。

于 2009-01-25T08:06:41.443 回答
0

尝试添加:

display:inline-block;

在#divtwo。如果可行,我当然会为 IE7 添加一些条件注释

于 2009-01-25T04:38:46.403 回答