6

可能重复：
可以使用 <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/

第一行嵌入了一个带有常规结束标签的跨度，而第二行使用了一个自结束标签。第一行工作正常，而第二行有一个奇怪的结果。

我只是好奇为什么在每种情况下对元素的处理会有如此大的差异。我知道在非严格的 xhtml 下，自闭标签并没有得到很好的支持。似乎自动关闭标签被视为只是一个开放标签。

现代浏览器仍然不支持自关闭 html 标签是否有充分的理由？我是否希望更改文档类型或其他内容以使其正常工作？

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

4

3 回答 3

3

现代浏览器仍然不支持自关闭 html 标签是否有充分的理由？

向后兼容性。

我是否希望更改文档类型或其他内容以使其正常工作？

您想使用 XML，您需要以 XML 格式发送您的文档（application/xhtml+xml具体来说，是 ）。这主要与 MIME 类型有关，与 doctype 无关。当然，没有办法让它在 IE <9 中工作。

于 2012-11-29T04:46:44.707 回答
2

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

在此处输入图像描述

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

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

于 2012-11-29T02:16:28.753 回答
1

当你自我封闭一个像跨度这样的标签时，据我所知***，你实际上并没有自我封闭它——那些标签没有那种能力。你实际上在做的是让它保持打开状态。当你把东西打开时，浏览器会自由地关闭它们，通常是在它们父母的结束标签的末尾。

因此，在您的示例中，在 nº2 的情况下，您会得到一个一直到 p 元素末尾的内联块。现在，在该行内块中，您要附加一个块级元素。好吧，一次又一次……通过将块放入内联（内联块）中，浏览器获得了另一种自由，并且（基本上）将块元素周围的所有内容放入所需的块级元素中到（那是一两个 - 不多了）。

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

由于块垂直堆叠，因此您在第二段中获得的外观也就不足为奇了。

在以下位置查看彩色小提琴：jsfiddle.net/T7ByE/1/（不可点击）以更好地查看它。

相关链接
display:block inside display:inline

***它看起来似乎取决于您的内容类型，跨度实际上可以是自封闭的*

于 2012-11-29T02:35:06.650 回答