为什么在这种情况下使用自动关闭标签会产生如此突出和奇怪的效果？

Question

  

可能重复：
  Can a span be closed using <span />?

<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p>

<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>​

http://jsfiddle.net/T7ByE/

第一行嵌入带有常规结束标记的span，而第二行使用自闭标记。第一行正常工作，而第二行有奇怪的结果。

我只是好奇为什么在每种情况下元素的处理都存在这样的差异。我知道在非严格的xhtml下，自动关闭标签不是很好支持。看来自动关闭标签只被视为一个开放标签。

有一个很好的理由现代浏览器仍然不支持自动关闭的html标签吗？我是否希望更改doctype或其他内容以使其生效？

具有讽刺意味的是，我实际上是从一个明确的结束标记开始，但是通过浏览器的xml解析器运行并返回到html，解析器感觉就像将空元素折叠成一个自动关闭的标记，这很快就破坏了所有内容。 / p>

Answer 1

  

现代浏览器是否仍然不支持自动关闭html标签？

向后兼容性。

  

我是否希望更改doctype或其他内容以使其生效？

您想要使用XML，您需要send your document as XML（application/xhtml+xml，具体而言）。这主要与MIME类型有关，而与doctype无关。当然，有no way to make it work in IE <9。

Answer 2

Web浏览器具有DOM检查器，它向我们展示了生成的DOM树的结构。例如，在Firebug中：

正如您所看到的，Firefox无法识别自动关闭标记，而是将其视为开始标记。 Firefox将在到达段落末尾时自动关闭该SPAN元素，这意味着SPAN将包含段落的剩余文本。

现在，由于您要将DIV元素插入SPAN元素，因此DIV将布置在该SPAN元素的文本内容之下。这是因为DIV元素是块级元素。在文本内容之后出现的块级元素布局在文本内容之下。

Answer 3

当你自己封装一个像span这样的标签时，就我所能想象的那样***，你实际上并没有自我封闭 - 这些标签没有这种能力。你真正做的是让它保持开放。当你把东西打开时，浏览器会自由地关闭它们，并且通常在它们的父级结束标记的末尾关闭它们。

所以在你的例子中，在nº2的情况下，你得到一个内联块，它一直持续到p元素结束。现在，在内联块中你附加了一个块级元素。好吧，这一次又一次......通过在内联（内联块）中放置一个块，浏览器采用另一个自由，并且（基本上）将块元素周围的所有内容放入需要的块级元素中到（那是1或2 - 不再）。

在你的情况下，你会在插入的div之前的文本周围找到一个“匿名”块（“看看我是否可以嵌入一个内联块。”）。

由于块是垂直堆叠的，因此，第二段的外观就不足为奇了。

请在以下网址查看彩色小提琴：jsfiddle.net/T7ByE/1/（不可点击）以便更好地查看。

相关链接
display:block inside display:inline

***它有点seems，根据您的内容类型，跨度实际上可以自我封闭*