<fieldset> 上的网格布局... chrome 上的错误？

Question

根据我数十年的手工编写 HTML 的经验，我了解到 <form>、<fieldset> 只是 block 级别的元素，例如 <div>。在 CSS 方面，它们在定位和大小方面的行为完全相同。 （请耐心等待，我在这里忽略了像 IE6 这样的旧浏览器。）....或者我是这么认为的....

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

我在一个项目中到处都是<form> 和<fieldset>。为了简化我的问题，我有类似的内容：

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

我想让gridChilddivs 在各个列的布局中。所以我有类似的CSS：

fieldset {
  display: grid;
  grid-template-columns: 50px 2fr 6fr 6fr auto ....;
} 

它奏效了。它在我的屏幕上完美地显示了这些列......它适用于 Firefox、Android 甚至 Edge。截止日期已过期。我很着急，我没有在 Chrome 上测试它。我认为如果 Firefox 和 Edge 运行良好，那么 Chrome 也应该可以运行，对吧？或者我是这么想的…… 后来，我发现这在 Chrome 上不起作用。 Chrome 上完全忽略了网格布局。我花了几天时间来调试问题。

在几个不眠之夜之后，我发现display:grid 不适用于<fieldset>。它必须应用于<div> 才能使 Chrome 正常工作。这对我来说是一个惊喜，因为我一直在使用 <form> 和 <fieldset> 以跨浏览器的方式进行很多 CSS 定位，比如浮动、绝对定位等，它们的行为就像 <div>每时每刻。但是为什么不是网格布局呢？这是 Chrome 的一个错误，还是这种行为是这样设计的？因为我看到这对于 Firefox、Edge 和 Android 来说都不是问题。

我能想到的一个简单解决方法是将<div> 包裹在<fieldset> 中，如下所示：

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

但正如我之前所说，我到处都有<form> 和<fieldset>。如果我可以避免更改 HTML 结构，那将是最好的。我写这里是为了寻求 CSS 解决方案/hack，所以我不必经历和重写数百行 HTML。

Answer 1

此问题的另一种解决方法是使用form 作为网格对象并在fieldset 上使用display: contents。这不会破坏语义标记，但如果表单中有多个元素，它们都将包含在网格中。

.some-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.some-form__fields {
  display: contents;
}

<form class="some-form">
  <fieldset class="some-form__fields">

    <label>
      First Name
      <input type="text"/>
    </label>
    <label>
      Last Name
      <input type="text"/>
    </label>
    <label>
      Favourite snack
      <input type="text"/>
    </label>
    
    <label>
      Favourite color
      <input type="text"/>
    </label>

  </fieldset>
</form>

Answer 2

是的，这是 Blink 中的一个错误。 fieldset 具有明智的特殊情况。 https://bugs.chromium.org/p/chromium/issues/detail?id=262679