3

我有两个相同的代码部分，其中父标记内包含三个 div。一个父标签是 HTML5 标签，另一个是带有“.footer”类的 div 标签。我已经为这两个部分提供了相同的 css 代码，但我收到了不同的结果。我将第一个包含“.one”类的 div 标签的高度调整为 400px，它大于其包含标签的高度，即 300px。使用 HTML5 标记，整个包含的 div 会随着更大的 div 展开。然而，“页脚”类的 div 保持不变。这是因为我的 css 编写不当还是 HTML5 标签的行为与 div 标签不同？

在 JSFiddle 上查看

  <div class="footer">

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </div>

    <footer>

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </footer>

这是我使用的 CSS

.footer{
    background-color: rgba(0,0,102,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
.footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
footer{
    background-color: rgba(0,51,255,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
.one{
    height: 400px;
    }
4

1 回答 1

5

这可能是由于用户代理样式表。浏览器为不同的元素提供默认格式。例如，Chrome 显示p为display: block;并给它一些margin，但对span. 如果没有重置样式表，就没有理由认为两个 HTML 元素会在给定的浏览器中显示相同的内容。

编辑：

但是，这不是你的问题。这里的问题是特异性。您可能已经知道这一点，但是当给定元素的属性有两个竞争值时，CSS 会选择由最具体的选择器定义的属性。在这种情况下，选择器.footer div比 更具体.one，因此子 div 使用由定义的高度.footer div，恰好是较短的高度。

将您孩子的选择器更改div为更具体，您可以通过使用 来做到这一点id，并且它可以按您的预期工作。

于 2013-01-11T14:00:07.747 回答