浏览器增加了空code标签 [英] Browser adds empty code tag

问题描述

您可以看到我在此的jsfiddle 。

我试着用 code 标签来区分特殊的内容，但是这对我快速事与愿违（你可以在上面的链接查看）。当我使用Firebug看的内容，这样的：

I tried usingcode tags to distinguish special content, but this quickly backfired on me (as you can see in the above link). When I use Firebug to look at the content, this:

<code>
    <p> Some line of code </p>
    <p> Another line of code </p>
</code>

已经变成这样：

<p>
    This is a sample paragraph with a code block:
    <code> </code>
</p>
<p>
    <code> Some line of code </code>
</p>
<code>
    <p> Another line of code </p>
</code>

现在，这可以通过改变来解决＆LT; code＆GT; 到＆LT; D​​IV CLASS =code＆GT ; （如被看见在本的jsfiddle ），但为什么并在浏览器为此在首位，而它为什么这样做的只有的在每个段落的第一个部分？

Now, this can be solved by changing <code> to <div class="code"> (as seen in this jsFiddle), but why did the browser do this in the first place, and why did it do it only to the first section in each paragraph?

火狐，歌剧，铬，IE浏览器，Safari浏览器 - 所有的人都这样做，但我真的很想知道为什么。它是否与 code 只发生，还是会与其他标签做到这一点？而为什么会移动浏览器标签周围像呢？

Firefox, Opera, Chrome, Internet Explorer, Safari - all of them do this, but I'd really like to know why. Does it happen with code only, or will it do this with other tags? And why would browsers move tags around like that?

推荐答案

HTML放在哪些元素可以嵌套在其他元素一定的限制。有时候，浏览器会很乐意建造一个荒谬的DOM出一定的嵌套场景，如＆LT; D​​IV＆GT; 直接在＆LT; UL＆GT; 。其他时候，他们绝对不能因为其他书面或不成文的解析规则，如＆LT; P＆GT;从不包含任何其他块元素元素，甚至没有其他的＆LT; p＆GT; 元素（这是的在规范中隐含），所以他们必须改变DOM的东西，他们的可以的的工作，导致你观察到的行为。

HTML places certain restrictions on which elements can be nested in which other elements. Sometimes browsers will happily construct a nonsensical DOM out of certain nesting scenarios, such as a <div> directly in a <ul>. Other times, they absolutely can't because of other written or unwritten parsing rules, such as <p> elements never containing any other block elements, not even other <p> elements (this is implied by the spec), so they have to work around it by changing the DOM to something that they can work with, resulting in the behavior you observe.

由于不能嵌套＆LT; P＆GT; 之一中元素的另一个位置，这里发生了什么是此元素：

Because you cannot nest <p> elements within one another at all, what's happening here is that this element:

    <p> Some line of code </p>

是导致此其他元素将被终止：

is causing this other element to be terminated:

<p>
    This is a sample paragraph with a code block:
    <code>

由于有一个空的＆LT; code＆gt;在那里标签，它的关闭，以及包含＆LT; P＆GT; 关闭为好，因为随后的＆LT; p＆GT; 开始标记会自动关闭preceding ＆LT; p＆GT; 开始标记：

Since there's an empty <code> tag in there, it's closed, and the containing <p> closed as well, because a subsequent <p> start tag will automatically close a preceding <p> start tag:

<p>
    This is a sample paragraph with a code block:
    <code> </code>
</p>

在这一点上的浏览器必须处理的事实，＆LT; code＆GT; 和＆LT; P＆GT; 标签，现在是有效的在错误的顺序，但仍嵌套。为了弥补第一个外的重组＆LT; P＆GT; 元素，事实上，有将是一个＆LT; code＆GT; 标记之前的第二个内部＆LT; p＆GT; ，它插入＆LT; code＆GT; 标签进入第二＆LT; p＆GT; ，把它的内容到code：

At this point a browser has to deal with the fact that the <code> and <p> tags are now effectively in the wrong order, but still nested. To compensate for the restructuring of the first "outer" <p> element, and the fact that there was going to be a <code> tag before the second "inner" <p>, it inserts <code> tags into the second <p>, turning its contents into code:

<p>
    <code> Some line of code </code>
</p>

由于浏览器似乎让＆LT; P＆GT; 在＆LT; code＆GT; 不管是什么原因（请注意，在这一点上＆LT; code＆GT; 仍然没有的明确终止的有＆LT; / code＆GT; ），浏览器构建DOM的其余部分如下，继续在它的途中之前：

Since browsers do seem to allow <p> within <code> for whatever reason (note that at this point the <code> is still not yet explicitly terminated with a </code>), the browser builds the rest of the DOM as follows, before continuing on its way:

<code>
    <p> Another line of code </p>
</code>

这可能是对整个传统和跨浏览器兼容的浏览器的原因相一致;其中的一些遗留解析规则已经 retconned到HTML5规范为好。不幸的是，我不是一个浏览器的实施者，所以我不能列出所有可能的情况;在另一方面，这是不明智的依靠这样的细节考虑你写的标记是摆在首位无效。

This is probably consistent across browsers for legacy and cross-browser compatibility reasons; some of these legacy parsing rules have been retconned into sections of the HTML5 spec as well. Unfortunately, I'm not a browser implementer so I can't list out all possible scenarios; on the other hand, it's unwise to rely on such details considering the markup you're writing is invalid in the first place.

最后，今天的高度相关XKCD （当然）：

这篇关于浏览器增加了空code标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！