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

我想让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才能运行.这对我来说是惊喜,因为我一直在做这么多的CSS定位,就像漂浮,绝对定位等在跨浏览器的方式<form>,并<fieldset>和他们一直表现得就像<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>