HTML标签是替换元素吗？

Question

首先定义替换元素from W3：

替换元素

内容超出范围的元素 CSS 格式化模型，例如图像、嵌入文档或小程序。 例如，HTML IMG 元素的内容经常被替换为 其“src”属性指定的图像。经常更换元素 具有固有尺寸：固有宽度、固有高度、 和内在比率。例如，位图图像具有内在的 以绝对单位指定的宽度和固有高度（从 内在比率显然可以确定）。另一方面， 其他文档可能没有任何内在维度（例如， 空白 HTML 文档）。

用户代理可能认为被替换的元素没有任何内在的 尺寸，如果认为这些尺寸可能泄漏 敏感信息给第三方。例如，如果一个 HTML 文档根据用户的银行余额改变内在大小， 那么 UA 可能想要表现得好像该资源没有内在的 尺寸。

CSS 中不考虑被替换元素的内容 渲染模型。

似乎与label无关，对吧？

然后，我看到了this blog post，它给出了这个规则：

您不能将生成的内容应用于被替换的元素。那是你 无法将伪元素选择器 :before 或 :after 应用于它们。

但我可以。

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

---

所以，根据MDN's doc 关于line-height：

案例 1 - 在 块级元素 上，line-height CSS 属性指定 元素内线框的最小高度。

案例 2 - 在不可替换的内联元素上，line-height 指定了 用于行框高度的计算。

案例 3 - 关于替换的内联元素，例如按钮或其他输入元素， line-height 无效。

我设置了 JSfiddles 来说明这些行为，比较块元素 (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 属于短语内容类别，我也看到过this post，但我没有找到我的问题的答案。 em>

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

Answer 1

HTML 标签是替换元素吗？

没有

您不能将生成的内容应用于被替换的元素。也就是说，您不能将伪元素选择器 :before 或 :after 应用于它们。

但我可以。

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

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

所以你没有看到任何与你正在阅读的文档相矛盾的东西。

---

在包装表单上设置 line-height，并在 div 和 label 上覆盖它 - 不行，这两个元素的行为不同

他们应该表现不同。

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

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

div 是一个块元素，因此它的内联框位于 div 本身内部，而不是在表单的内联框内。

如果您是make the div display: inline，那么您比较两个元素display: inline，而不是一个inline 和一个block，您会得到相同的结果。