如果字段集的显示为网格，图例元素是否为网格项？

Question

如果将fieldset元素设置为display：grid，css-grid规范的哪一部分解决了图例元素应如何处理？

如您所知，图例元素通常是fieldset元素的第一个子元素，但很少有人希望将其视为网格项。

我想知道是否需要采取明确的样式预防措施，以确保图例元素不会被视为网格项，或者规范中是否已有某种规则（我忽略了），这意味着图例元素（按规范） ）不是网格项目。

Answer 1

您不会在CSS规范中找到这些详细信息，而在HTML规范中找到。HTML非常具体地说明了fieldset和legend元素应如何呈现，并且由于历史原因，这些元素的布局实现极为僵化，几乎没有办法通过display属性更改布局模式。

因此，display: grid任何浏览器都不支持字段集。实际上，就在几天前，围绕HTML规范的拟议新增内容进行了讨论，以指定display应如何处理属性fieldset和legend元素，而这就是要添加的内容：

的fieldset元件，当它产生一个盒子（即，不是“显示：无”或“显示：内容”），有望作为如下：

• ...

• “显示”属性的作用如下：

  • 如果“ display”的计算值是“ inline”，“ inline-block”，“ inline-table”，“ ruby​​”，“ ruby​​-base”，“ ruby​​-text”，“ ruby​​-base-container”之一，“ ruby​​-text-container”，“ inline-flex”或“ inline-grid”，然后表现为“ inline-block”。

  • 如果“ display”的计算值是“ block”，“ table”，“ table-row-group”，“ table-header-group”，“ table-footer-group”，“ table-row”，“ table-cell”，“ table-column-group”，“ table-column”，“ table-caption”，“ list-item”，“ flow”，“ flow-root”，“ run-in”，“ flex”或“网格”，然后表现为“阻止”。

这基本上巩固了当前的文本，即说该fieldset元素应该建立一个块格式化上下文，而没有指定如果UA选择不遵循此定义时该元素的行为。

此，再加上当前可互操作的浏览器的行为，意味着一个的布局legend元件不会受到它的父的影响fieldset具有display: grid的，因为它的父fieldset将成为在第一位置的网格容器来防止。

Answer 2

<fieldset>现在所有主流浏览器都支持网格（和 Flexbox）布局。Firefox早在 2015 年就添加了它。

默认情况下，渲染的<legend>不是匿名字段集内容框（实现实际的网格/弹性布局）的子框，因此它不被视为网格项 - 无论字段集的display值如何，它的行为都是相同的。

字段集/图例渲染的 HTML 规范现在对布局如何工作有相当详细的描述，以 CSS 术语进行描述。

要覆盖默认行为并使<legend>行为像网格项一样，请使用 对其进行样式设置display: contents，如CSS 显示规范中所述：

根据 HTML，<legend>withdisplay: contents不是渲染的图例，因此它没有神奇的显示行为。（因此，它会正常反应display: contents。）

演示在这里： https: //codepen.io/karlhorky/pen/LYdxQWe