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

Question

可能重复:是否
可以使用<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,解析器感觉就像将空元素折叠成一个自动关闭标记,这很快就破坏了所有内容.

Answer 1

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

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

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