Html 图例不包括：：before，而h2不包括

为什么

图例

元素不会在

之前更改
clientHeight
内容，而
h2
元素会更改，即使两者都具有
高度：auto；显示：块


let h2=document.querySelector（'h2'）
legend=document.querySelector（'legend'））
console.log（'h2:'，h2.clientHeight+'px'）
console.log（'legend:'，legend.clientHeight+'px'）
body{padding:200px 0；}
h2：：之前，
图例：：之前{
内容：“；
显示：块；
高度：150像素；
利润上限：-150px；
}
h2，图例{
背景色：rgba（0,0,0,1）；
显示：块！重要；
高度：自动！重要；
}

标题2
传奇
问题实际上与伪元素无关，而是与字段集中包含图例这一事实有关，而字段集是

您可以尝试对抗字段集及其关联图例元素的浏览器样式（如果您想尝试的话，上面我链接的文章是一个很好的资源），或者您可以从HTML中删除字段集（正如本文所提到的，尽管字段集是对表单字段集进行分组的最具语义的方式，但许多人都避免使用它们），或者，除了字段集中的图例元素之外，您还可以使用其他元素

下面是一个片段，演示了伪元素与实元素以及带字段集与不带字段集的情况。如您所见，图例的高度为0，无论它是否为伪元素，都完全取决于它是否包装在字段集元素中：


console.log（'h2 pseudo-without-fieldset:'，document.querySelector（'.pseudo.no-fieldset-h2'）。clientHeight+'px'）；
console.log（'legend pseudo without fieldset:'，document.querySelector（'.pseudo.no-fieldset-legend'）。clientHeight+'px'）；
console.log（'h2 pseudo with fieldset:'，document.querySelector（'.pseudo.with-fieldset h2'）。clientHeight+'px'）；
console.log（'带有字段集的伪图例：'，document.querySelector（'.pseudo.with-fieldsets-legend'）。clientHeight+'px'）；
console.log（'h2 real而不带字段集：'，document.querySelector（'.real.no-fieldsets h2'）。clientHeight+'px'）；
console.log（'legend real without fieldset:'，document.querySelector（'.real.no-fieldset legend'）。clientHeight+'px'）；
console.log（'h2 real with fieldset:'，document.querySelector（'.real.with-fieldset h2'）。clientHeight+'px'）；
console.log（'legend real with fieldset:'，document.querySelector（'.real.with-fieldset legend'））.clientHeight+'px'）；
正文*{
背景色：rgba（0,0,0,1）；
}
h2：：之前，
图例：：之前{
内容：“；
显示：块；
高度：150像素；
利润上限：-150px；
}
h2，图例{
显示：块！重要；
高度：自动！重要；
}

不带字段集的伪元素版本

不带字段集的实元素版本

带有字段集的伪元素版本

带字段集的实元素版本

我发现：图例被归类为“语法内容”，大多数被归类为语法内容的元素只能包含本身被归类为语法内容的元素，而不能包含任何流内容。