CSS Grid Firefox vs Chrome与grid-template-columns的区别 [英] CSS Grid Firefox vs Chrome difference with grid-template-columns
问题描述
以下代码段设计用于Firefox(从2020-06-24开始为79.0a1)，其中CSS网格的行为符合我的预期(标签和输入在同一行上，跨越字段集的宽度提交).在Chrome浏览器(83.0.4103.116)中，标签和输入位于不同的行上，并且提交按钮的宽度尽可能小.
The following snippet was designed for use in Firefox (79.0a1 from 2020-06-24), where the CSS grid is behaving as I expected (label and input on the same row, submit spanning the width of the fieldset). In Chrome (83.0.4103.116), the label and input go on different rows and the submit button is as narrow as its value allows.
<!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>这是浏览器错误还是我在做傻事?
Is this a browser bug or am I doing something silly?
推荐答案
display 的 grid 值似乎不适用于某些元素，例如< fieldset> 并在此处列为问题:
The grid value for display doesn't seem to work on certain elements such as <fieldset> and is listed as an issue here:
铬，问题375693:[css-flex] [css-grid] Flexbox/网格布局模型不适用于字段集元素"
如Stackoverflow相关线程中所述，在字段集上使用 display:contents 可能是一种解决方法:
As mentioned in the related thread on Stackoverflow, using display: contents on the fieldset instead might be a workaround:
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提及可能存在一些可访问性问题，因为< fieldset> (但不是其后代)对屏幕阅读技术来说是不可见的.我还无法使用Orca，NVDA和其他类似的屏幕阅读软件进行测试.
I'd note that MDN mentions there might be some issues with accessibility, as the <fieldset> — but not its descendants — will supposedly be invisible to screen reading technology. I haven't been able to test this with Orca, NVDA and other similar screen reading software yet.
这篇关于CSS Grid Firefox vs Chrome与grid-template-columns的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
