首页 文章

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

提问于
浏览
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/

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

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

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

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

3 回答

  • 1

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

    enter image description here

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

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

  • 3

    现代浏览器仍然不支持自动关闭html标签有充分的理由吗?

    向后兼容性 .

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

    你想使用XML,你需要send your document as XMLapplication/xhtml+xml ,具体) . 这主要与MIME类型有关,而与doctype无关 . 当然,还有no way to make it work in IE <9 .

  • 2

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

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

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

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

    看到一个彩色小提琴:jsfiddle.net/T7ByE/1/(不可点击)看到它更好 .

    Relevant Links
    display:block inside display:inline

    **它有点seems根据你的内容类型 Span 实际上可以自我封闭

相关问题