web-dev-qa-db-ja.com

<fieldset>のグリッドレイアウト... chromeのバグ？

HTMLのハンドコーディングに関する数十年の経験から、<form>、<fieldset>は<div>のようなblockレベルの要素であることがわかりました。 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でも動作します。期限が過ぎていました。私はRushにいて、Chromeでテストしませんでした。I FirefoxとEdgeが正常に機能する場合、Chromeも機能するはずですよね？またはそう思ったのですが...後で、Chromeでは機能しないことがわかりました。グリッドレイアウトChromeでは完全に無視されます。問題をデバッグするためだけに何日も費やしました。

眠れない夜を数回過ごした後、display:gridが<fieldset>で機能しないことがわかりました。 Chromeが機能するには、<div>に適用する必要があります。フローティング、絶対配置など、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ソリューション/ハックを探すためにここに書いているので、何百ものHTML行を調べて書き直す必要はありません。

cssgoogle-chromegrid-layoutcss-grid
17
user2526586

この問題の別の回避策は、グリッドオブジェクトとして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>
3
2matto

ええ、これはBlinkのバグです。フィールドセットには、賢明にレンダリングする特別な場合があります。 https://bugs.chromium.org/p/chromium/issues/detail?id=262679

0
svandragt