CSS Grid Firefox 与 Chrome 与 grid-template-columns 的区别 [重复]答案

【问题标题】：CSS Grid Firefox vs Chrome difference with grid-template-columns [duplicate]CSS Grid Firefox 与 Chrome 与 grid-template-columns 的区别 [重复]
【发布时间】：2020-10-15 17:53:38
【问题描述】：

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

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

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

【问题讨论】：

也被报告为 webcompat 问题：github.com/webcompat/web-bugs/issues/54609

标签： css google-chrome css-grid

【解决方案1】：

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

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

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

  <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 mentions 那里可能在可访问性方面存在一些问题，因为<fieldset> - 但不是它的后代 - 据说对屏幕阅读技术是不可见的。我还不能用 Orca、NVDA 和其他类似的屏幕阅读软件对此进行测试。

【讨论】：