html - HTML标签是被替换的元素吗？

Question

首先，替换元素的定义from W3 :

Replaced element

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user's bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

The content of replaced elements is not considered in the CSS rendering model.

它似乎与label 无关，对吧？

然后，我看到了this blog post ，这给出了一条规则:

You cannot apply generated content to replaced elements. That is, you cannot apply the pseudo-element selectors :before or :after to them.

但我可以。

所以，我可以假设它不是替换元素(我缺乏经验来证明相反的情况)。

---

因此，根据 MDN's doc关于 line-height :

Case 1 - On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

Case 2 - On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

Case 3 - On replaced inline elements, like buttons or other input element, line-height has no effect.

我设置 JSfiddles 来说明这些行为，比较 block 元素 (div) 和标签:

• Setting specific line-height directly on div and label - 好的
• Setting line-height on wrapping form, and override it on div and label - 不行，这两个元素的行为不同
• Setting line-height on wrapping form, label displayed as a block, overriding line-height on label and block - 好的

因此，label 表现得像一个非替换元素，但当涉及到覆盖 line-height 时，它却不是。

我不明白，有人对这种行为有任何解释吗？ label到底是不是替换元素？

在 W3.org ，我已经看到 label 属于 Phrasing 内容类别，并且我已经看到 this post ，但我没有找到问题的答案。

^{测试是在 Chrome 33 (Mac) 下进行的。}

Answer 1

Is HTML label a replaced element?

没有

You cannot apply generated content to replaced elements. That is, you cannot apply the pseudo-element selectors :before or :after to them.

但我可以。

引用说您不能在替换元素上使用:before 或:after。

由于 label 不是替换元素，您可以使用 :before 和 :after 就可以了。

因此您没有看到任何与您正在阅读的文档相矛盾的内容。

---

Setting line-height on wrapping form, and override it on div and label - Not OK, the two elements behave differently

他们应该表现不同。

表单内的行内框是表单的行高。

标签是内联的，因此它的内联框位于表单的内联框内。标签的行内框比它们所在的行内框小。

div 是 block 元素，因此它的行内框位于 div 本身内部，而不是表单的行内框内。

如果你make the div display: inline然后你比较两个 display: inline 元素而不是一个 inline 元素和一个 block 元素，你会得到相同的结果.