HTML标签是替换元素吗？

Question

首先，替换元件from W3的定义：

代替元件

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

如果认为这些尺寸可能会泄露 敏感信息给第三方，用户代理可能会认为替换的元素没有任何固有的尺寸 尺寸。例如，如果HTML 文档根据用户的银行余额更改了固有大小，则UA可能希望充当该资源没有固有 维度。

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

它似乎没有关注label，对吧？

然后，我看到this blog post，这给这一个规则：

不能应用生成的内容替换元素。也就是说，你 不能应用伪元素选择器：before或：after之后。

但我可以。

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

---

因此，根据MDN's doc约line-height：

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

案例2 - 在非替换内联元素上，行高指定 用于计算行盒高度的高度。

案例3 - 与替换内联元素，如按钮或其他输入元素， 行高不起作用。

我建立JSfiddles来说明这些行为，进行比较的块元件（div）和标签：

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

那么，label表现得像一个非替换的元素，但是当涉及覆盖line-height时，它没有。

我不明白，有人对此行为有任何解释吗？毕竟标签是被替换的元素吗？

在W3.org，我已经看到了label是在措词内容类别，我见过this post，但我没有找到一个答案，我与它的问题。

^{测试是在Chrome 33（Mac）下进行的。}

Answer 1

HTML标签是替换元素吗？

没有

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

但我可以。

该帖说，你不能在替换元素使用:before或:after。

由于label是不一个替换元素，你可以使用和:before上:after它。

因此，您没有看到任何与您正在阅读的文档相矛盾的内容。在包装形式，并覆盖它的div和标签

---

设置的line-height - 不正常，这两个元素表现不同

他们应该表现不同。

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

该标签是内联的，所以它的内联框放在表单的内联框中。标签的内联框比它们所在的内联框小。

div是一个块元素，所以它的内联框进入div本身内部，而不是表单的内联框。

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