Css 上的网格布局<；字段集>；。。。铬上的虫子？

从我几十年的手工编写HTML的经验中，我了解到

，

只是

块

级别的元素，比如

。就CSS而言，它们在定位和大小方面表现相同。（请容忍我，我忽略了像IE6这样的老浏览器。）。。。。或者我是这么想的

*在我继续之前，我必须声明我大部分时间使用Firefox进行开发和测试

我参与了一个项目，项目中到处都是

和

。为了简化我的问题，我有如下几点：

<form>
  <fieldset>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </fieldset>
</form>

它成功了。它在我的屏幕上完美地显示了这些栏目。。。它适用于Firefox、Android甚至Edge。截止日期已经过了。我当时很忙，没有在Chrome上测试。我认为如果Firefox和Edge可以正常工作，那么Chrome也可以正常工作，对吗？或者我是这么想的。。。 后来，我发现这在Chrome上不起作用。在Chrome上完全忽略网格布局。我花了几天时间调试这个问题

在几个不眠之夜之后，我发现

显示：网格

在

上无法工作。它必须应用于

，Chrome才能工作。这对我来说是一个惊喜，因为我用

和

以跨浏览器的方式做了很多CSS定位，比如浮动定位、绝对定位等，它们的行为一直都像

。但为什么不使用网格布局呢？这是Chrome的一个bug，还是这种行为就是这样设计的？因为我发现这对Firefox、Edge和Android来说都不是问题

我能想到的一个简单的解决方法是将

包装在

内，如下所示：

<form>
  <fieldset><div class="gridParent">
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </div></fieldset>
</form>

...
...
...

---

但正如我之前所说，我的

和

到处都是。如果我可以避免更改HTML结构，那将是最好的。我在这里写作是为了寻求CSS解决方案/破解，因此我不必遍历和重写数百行HTML。

这个问题的另一个解决方法是使用

表单

作为网格对象，并在

字段集

上使用

显示：内容

。这不会破坏语义标记，但如果表单中有多个元素，它们都将包含在网格中

。某种形式{
显示：网格；
网格模板柱：1fr 1fr 1fr；
}
.some-form___字段{
显示：内容；
}

名字
姓
喜爱的小吃
喜爱的颜色

是的，这是Blink中的一个bug。fieldset在渲染方面有特殊情况

从我几十年的手工编写HTML的经验中，我了解到

，

只是块级元素，比如

。。。很抱歉，。这个问题是在@Michael_B上提出的，它与同一个flexbox问题有关。解决方法——正如您已经解决的那样——是添加一个包装器元素。@Michael_B对我来说，flexbox和grid布局是类似的动物品种。如果一个不起作用，我就不指望另一个起作用。不过还是要感谢您提供的信息。@user2526586 AFAICT您自己提出的解决方法应该是公认的答案。你可能会考虑回答你自己的问题并接受它。同样，我不知道是否在FF中运行这个片段我得到了预期的结果（），但是当我在Chrome中运行时，我得到了原来的Bug（）。@ Bejay-Waly两个截图都显示了预期的行为（每个标签在3列网格中取一个网格单元）。恰好在FireFox屏幕截图中，标签文本将输入包装到下一行。输入上方显示的标签文本不是此代码段的目的。已合并到其他错误中，并于2020年8月修复：

<form>
  <fieldset><div class="gridParent">
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </div></fieldset>
</form>