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 div位于单个列的布局中。所以我有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解决方案/技巧，因此不必遍历并重写数百行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>

Answer 2

是的，这是Blink中的错误。 fieldset具有特殊情况下的渲染效果。 https://bugs.chromium.org/p/chromium/issues/detail?id=262679

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

2 个答案: