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 和其他类似的屏幕阅读软件对此进行测试。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269258.html

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

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

相关推荐

发表回复