Question

所以我有以下html：

    <html>
<head>
    <style>
        .box
        {
            height: 100px;
            width: 100px;
        }       
        #box1
        {
            background-color: Red;
        }
        #box2
        {
            background-color: Red;
        }
        #box3
        {
            border-style: dotted;
        }
        #box4
        {
            background-color: Red;
        }
    </style>
</head>
<body>
<div id="boxes">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
</div>
</body>
</html>

如果我将任何div标签更改为单个标签版本，例如：

<div id="box1" class="box"/>

后续标记会嵌套，至少在Chrome，Firefox和IE中是这样。有没有人知道有关此行为的交易？这对我来说似乎是个错误。

Answer 1

<div>不是HTML文档中的有效自关闭标记。如果您将其作为XHTML提供，那么它应该可以工作（如果没有，那就是浏览器错误）。

您还应该记住，Doctype不会更改文档的解释方式，只会改变mime类型（因此，如果您使用Content-Type application/xhtml+xml提供文档，它将起作用） - 您可以阅读更多内容在这里：http://www.webdevout.net/articles/beware-of-xhtml#content_type

Answer 2

问题可能是由浏览器进入怪癖模式引起的。

您可以尝试添加doctype

使用单个标签时Div标签嵌套

2 个答案: