1

Question

我想了解为什么浏览器的显示方式有差异＆lt; div＆gt;＆lt; / div＆gt;经文＆lt; div /＆gt;？

这是一个例子：片段＃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＆amp; html5：＆lt;！doctype html＆gt;

Answer 1

主要是因为<div />无效HTML。

如果您查看不同的doctypes，您会注意到div不能自动关闭。

根据W3C：

div元素必须同时包含开始标记和结束标记。

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

要在此处包含Chucks注释，HTML中的尾部斜杠不会自动关闭标记。使用尾部斜杠的自闭标签是XHTML的一个特性，而不是HTML。

Answer 2

正如您已经明确表示您正在使用来自HTML5 spec：

的HTML5

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

空白元素是：

area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbr

外来元素来自MathML和SVG名称空间。如您所见，这些元素都不是div元素，因此您的第二个示例是HTML5无效。

Answer 3

它没有渲染，因为它是一个空标记。 “”！= null。

Answer 4

自动关闭div标记是有效的XML，但它不是有效的XHTML。

XHTML标准没有具体说明div标签是否可以自动关闭，因此它依赖于XHTML标准所基于的HTML标准。 HTML 4.01标准规定div标记需要结束标记。

Answer 5

这里有两个问题：

为什么这种渲染不正确？
这是有效的HTML / XHTML / WhatNotML吗？

对于问题1，答案很简单：<div/>无法识别标签汤，因此如果您的浏览器处于标签汤模式，则无法正确处理。如果您必须使用这样的结构，那么将您的文档作为XML提供服务即可。

对于问题2，答案取决于。在HTML 4.01中，这当然无效。对于XHTML，新功能被添加到SGML以允许空元素使用“空结束标记”（NET），但仅当它立即跟随null-end-start-tag-closer 时。空结束开始标记为<div/，空结束标记为>，让后者跟随前者立即产生<div/>，这很好。使用XML SGML演示的任何语言都可以表达没有<foo/>内容的元素，无论foo是否已声明内容为EMPTY。

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

1

2：

5 个答案: