<div></div> vs <div />

Question

我试着理解为什么浏览器显示诗句的方式有区别？

下面是一个例子:代码片段#1的预期输出是三个方框，并排:黑色、蓝色、红色。代码片段2只显示黑色和红色-为什么不是在代码片段2？中呈现的蓝色框？

1：

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;"></div>

<div style="float:left; width:50px; height:50px; background:red;"></div>

2：

<div style="float:left; width:50px; height:50px; background:black;"></div>

<div style="float:left; width:50px; height:50px; background:blue;" />

<div style="float:left; width:50px; height:50px; background:red;"></div>

编辑:我正在使用Chrome 12 & html5：

Answer 1

主要是因为<div />不是有效的HTML。

如果您查看不同的doctype，您会发现div不能是自关闭的。

根据W3C的说法：

div元素必须同时具有一个开始标记和一个结束标记。

来源：http://www.w3.org/TR/html-markup/div.html

为了在这里也包含Chucks的注释，HTML中的尾斜杠并不是一个自动结束标记make。使用尾随斜杠的自结束标记是XHTML的一个特性，而不是HTML。

Answer 2

你已经澄清说你在使用HTML5.来自HTML5规范

然后，如果元素是一个void元素，或者该元素是一个外部元素，那么可能有一个U+002F SOLIDUS字符(/)。此字符对空元素没有影响，但在外部元素上，它将开始标记标记为自关闭。

无效要素是：

区域，基地，br，col，命令，嵌入，hr，img，输入，keygen，链接，元，param，源，跟踪，wbr

外部元素是来自MathML和SVG命名空间的元素。如您所见，这些元素中没有一个是div元素，因此第二个示例是无效的HTML5。

Answer 3

它没有呈现，因为它是一个空标记。"“=空。