CSS Grid Firefox vs Chrome 与 grid-template-columns 的区别


CSS Grid Firefox vs Chrome difference with grid-template-columns

本问题已经有最佳答案，请猛点这里访问。

以下代码段设计用于 Firefox(2020 年 6 月 24 日的 79.0a1)，其中 CSS 网格的行为符合我的预期(标签和输入在同一行，提交跨越字段集的宽度)。在 Chrome (83.0.4103.116) 中，标签和输入在不同的行上，提交按钮尽可能窄。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
  <style type="text/css">
    input[type="submit"] {
      display: block;
      grid-column-start: 1;
      grid-column-end: 3;
    }
   
    label {
      display: block;
      text-align: right;
    }
   
    fieldset {
      display: grid;
      grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }
  </style>
</head>

<body>
  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>
</body>

</html>

这是浏览器的错误还是我在做一些愚蠢的事情？

相关讨论

display 的 grid 值似乎不适用于某些元素，例如 <fieldset>，并在此处列为问题：

  • Stackoverflow，"Chrome 上字段集错误的网格布局"

  • Chromium，"问题 375693：[css-flex][css-grid] Flexbox/网格布局模型不适用于字段集元素"

正如 Stackoverflow 上的相关线程中所述，在字段集上使用 display: contents 可能是一种解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
input[type="submit"] {
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
}
   
label {
  display: block;
  text-align: right;
}
   
form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}
   
fieldset {
  display: contents;
}
1
2
3
4
5
6
7
  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>

我注意到 MDN 提到可能存在一些可访问性问题，因为 <fieldset> a€" 但不是它的后代 a€" 可能对屏幕阅读技术是不可见的。我还不能用 Orca、NVDA 和其他类似的屏幕阅读软件对此进行测试。