< fieldset>上的网格布局... chrome上的bug? [英] Grid layout on <fieldset>... Bug on chrome?

问题描述

从我数十年的HTML手动编码经验中，我了解到<form>，<fieldset>只是block级别的元素，例如<div>.就CSS而言，它们在定位和大小调整方面的行为是相同的. (请耐心等待，我在这里忽略了IE6之类的旧浏览器.)....还是我以为....

From my decades-long experience of hand-coding HTMLs, I have learnt that <form>, <fieldset> are just block-level elements like <div>. CSS-wise, they behave just the same in terms of positioning and sizing. (Please bear with me, I am ignoring old browsers like IE6 here. ) .... or so I thought....

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

*Before I go on, I have to state that I use Firefox for development and testing most of the time.

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

I was on a project with a lot of <form> and <fieldset> all over the place. To simplify my question here, I have something like:

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

我想让gridChild div位于单独列的布局中.所以我有CSS之类的东西:

I wanted to have the gridChild divs to be in layout of individual columns. So I had the CSS something like:

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

它奏效了.它在我的屏幕上完美地显示了各列...在Firefox，Android甚至Edge上都可以使用.截止日期已到.我很着急，但没有在Chrome上进行测试.我以为如果Firefox和Edge可以正常工作，那么Chrome也应该可以工作，对吗?或者我以为... 后来，我发现这在Chrome上不起作用. Chrome上的网格布局被完全忽略.我花了几天时间来调试问题.

And it worked. It showed the columns perfectly on my screen... It works on Firefox, Android and even Edge. The deadline was overdue. I was in rush and I didn't test it on Chrome. I thought that if Firefox and Edge works fine, then Chrome should work too, right? Or so I thought... Later on, I discovered that that doesn't work on Chrome. The grid layout is completely ignored on Chrome. I spent days just to debug the problem.

经过几个不眠之夜，我发现display:grid在<fieldset>上不起作用.必须将其应用于<div>，Chrome才能运行.这让我感到惊讶，因为我已经使用<form>和<fieldset>以跨浏览器的方式进行了如此多的CSS定位，例如浮动，绝对定位等，并且它们的行为方式与<div>每时每刻.但是为什么不选择网格布局呢?这是Chrome的错误，还是设计成类似的行为?因为我看到这对于Firefox，Edge和Android来说不是问题.

After a few sleepless nights, I found out that display:grid doesn't work on <fieldset>. It has to be applied to <div> for Chrome to work. That was a surprise for me, because I have been doing so many CSS positioning, like floating, absolute-positioning, etc in a cross-browser fashion with <form> and <fieldset>, and they have been behaving just like <div> all the time. But why not the Grid layout? Is this a bug for Chrome, or is this behaviour designed to be like that? Because I see that this is not a problem for Firefox, Edge and Android.

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

An easy fix I can think of is to wrap a <div> inside <fieldset>, like this:

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

But as I said before, I have <form> and <fieldset> all over the place. It would be best if I can avoid changing the HTML structures. I am writing here to seek for a CSS solution/hack, so I don't have to go through and rewrite hundreds of HTML lines.

推荐答案

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

Another workaround for this issue is to use the form as the grid object and use display: contents on the fieldset. This doesn't break semantic markup, though if there are multiple elements within the form they will all be included in the grid.

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

这篇关于< fieldset>上的网格布局... chrome上的bug?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！