Can'；用CSS网格定位HTML图例标记 问题

出于可访问性原因，我有一个带有多个字段集和图例标记的表单。我希望图例标记位于输入字段下方。因为我在字段集上使用CSS网格，所以（在firefox上）让它工作的唯一方法是给legend标记一个绝对位置

在其他浏览器中，如Chrome和Edge，这似乎无法正确渲染。我做错了什么？为什么我不能使用CSS网格来定位图例标记

字段集{
显示：网格；
网格模板列：minmax（max content，12vw）auto；
网格模板行：自动；
位置：相对位置；
垫底：2米；
}
字段集图例{
位置：绝对位置；
保证金：0；
填充：0；
/**
*用户Kamel建议
*默认情况下，AFAIK图例的样式为块元素。
*这绝对是针对Firefox的
*/
显示：块；
网格柱：2/3；
网格行：2/3；
}

易懂的描述
领域
易懂的描述
领域

• 标记仅用于字段集标题

• 腿部化的显示样式必须为块

• 如果要使用下面的文本，则必须位于标签标签中

• 这是我在CHROME和FIREFOX中使用的代码
  字段集{ 显示：网格； 网格模板列：minmax（max content，12vw）auto； 网格模板行：自动
  位置：相对位置； 垫底：2米； }
  字段集图例{ 位置：块； 保证金：0； 填充：0
  网格柱：2/3； 网格行：2/3； }
  领域 易懂的描述
  
  领域 易懂的描述

---

问题不在于

，而在于

作为网格，在chrome中不起作用

参考：

因此，您需要在

中添加一个网格

包装器

.grid容器{
显示：网格；
网格模板列：minmax（max content，12vw）auto；
网格模板行：自动；
位置：相对位置；
垫底：2米；
}
字段集图例{
位置：绝对位置；
保证金：0；
填充：0；
/**
*用户Kamel建议
*默认情况下，AFAIK图例的样式为块元素。
*这绝对是针对Firefox的
*/
/*显示：块*/
网格柱：2/3；
网格行：2/3；
}

易懂的描述
领域
易懂的描述
领域

related：感谢您的建议，我已尝试添加display:block；但不幸的是，这并没有改变：非常感谢！很高兴提供帮助：）如果您感兴趣，我很遗憾地注意到这会破坏可访问性，因为字段集必须有标签，但没有，因为它嵌套在div.t中_T@grandel：对于属性使用标签

怎么样。我做了一个…哇，太棒了，再次感谢你的帮助！虽然这感觉有点骇客，但我严格要求自己避免重复内容，所以我不会简单地实现它，因为我认为W3或浏览器的工作是为开发人员提供更好的设计。在我看来，应该可以在字段集和标签上使用网格。