网格布局 … Bug on 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>

我想让gridChild divs在各个列的布局中。所以我有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作为网格对象，并在display: contents上使用fieldset。这不会破坏语义标记，但如果表单中有多个元素，它们都将包含在网格中。

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