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

debugcn 发表于 Dev

爷爷

问题

由于可访问性的原因，我有一个包含多个字段集和图例标记的表单。我希望图例标签位于输入字段下方。由于我将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>

Firefox中的屏幕截图（这是我想要实现的）

Chrome中的屏幕截图

到目前为止的研究

MDN说：

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

https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Styling_web_forms

但这似乎没有在任何地方提到CSS Grid表示它行不通。为什么不呢？它也适用于所有其他元素。

斯瑞

问题不在于<legend>而是<fieldset>在chrome中无法使用as网格。

请参阅：<fieldset>上的网格布局... chrome上的bug？

所以，你需要添加一个网格 wrapper内<fieldset>。

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。