无法使用 CSS Grid 定位 HTML 图例标签

Question

问题

出于可访问性原因，我有一个包含多个字段集和一个图例标签的表单。我希望图例标签位于输入字段下方。由于我将 CSS Grid 用于字段集，因此（在 firefox 上）使其正常工作的唯一方法是为图例标签提供绝对定位。

在其他浏览器中，例如 Chrome 和 Edge，这似乎无法正确呈现。我究竟做错了什么？为什么我似乎无法使用 CSS Grid 来定位图例标签？

fieldset {
  display: grid;
  grid-template-columns: minmax(max-content, 12vw) auto;
  grid-template-rows: auto auto;
  
  position: relative;
  padding-bottom: 2em;
}

fieldset legend {
  position: absolute;
  margin: 0;
  padding: 0;
  
  /**
   * Suggested by user Kamel
   * AFAIK legend is styled a block element by default.
   * It definitely is for Firefox
   */
  display: block;
  
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

<fieldset>
<legend>An accessible description</legend>
<label>Field</label>
<input type="text">
</fieldset>

<fieldset>
<legend>An accessible description</legend>
<label>Field</label>
<input type="text">
</fieldset>

Screenshot in Firefox（这是我想要实现的）

Screenshot in Chrome

到目前为止我的研究

MDN 说：

<legend> 元素的样式可以，但控制它的位置可能有点棘手。默认情况下，它始终位于其<fieldset> 父级的顶部边框上，靠近左上角。要将其定位在其他位置，例如在某个字段集中的某个位置，或者靠近左下角，您需要依靠定位。

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms

但它似乎没有在任何地方提到 CSS Grid 说它不起作用。为什么不应该呢？它也适用于所有其他元素。

Answer 1

问题不在于<legend> 而在于<fieldset> 作为网格，它在chrome 中不起作用。

参考：Grid layout on <fieldset>... Bug on chrome?

所以你需要在<fieldset> 中添加一个grid wrapper。

.grid-container {
  display: grid;
  grid-template-columns: minmax(max-content, 12vw) auto;
  grid-template-rows: auto auto;
  position: relative;
  padding-bottom: 2em;
}

fieldset legend {
  position: absolute;
  margin: 0;
  padding: 0;
  /**
   * Suggested by user Kamel
   * AFAIK legend is styled a block element by default.
   * It definitely is for Firefox
   */
  /* display: block; */
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

<fieldset>
  <div class="grid-container">
    <legend>An accessible description</legend>
    <label>Field</label>
    <input type="text">
  </div>
</fieldset>

<fieldset>
  <div class="grid-container">
    <legend>An accessible description</legend>
    <label>Field</label>
    <input type="text">
  </div>
</fieldset>

Answer 2

• 标签仅用于fieldset标题。

• legened显示样式必须是块状。

• 如果要在下面使用文本，必须在标签标签中。

• 这是在 CHROME 和 FIREFOX 中工作的我的代码

  字段集 { 显示：网格； 网格模板列：最小最大（最大内容，12vw）自动； 网格模板行：自动自动；

  位置：相对； 底部填充：2em； }

  字段集图例 { 位置：块； 边距：0； 填充：0;

  网格列：2 / 3； 网格行：2 / 3； }

  场地 易于理解的描述
  
  场地 易于理解的描述