我创建了一个网站，上面有输入字段，当我开始输入任何内容时，输入字段会变得非常小。但这种行为只出现在 Mac 上的 Chrome(当前版本 63)上。 Safari 上的同一网站或 Windows 上的 Chrome 上没有显示此内容，我不知道发生了什么。
这里有两张截图:
我指出问题是由于我试图用输入字段填充 css 网格列引起的。您可以在 (S)CSS 代码中看到这一点，我在其中尝试使用以下选项之一实现此目的:
// All these 3 options get me to the same bug:
justify-items: stretch;
// Same with this option:
input {
width: 100%;
}
// Or this one:
input {
justify-self: stretch;
}
这里或多或少是问题的最低版本。我还创建了一个 fiddle ，但在 Mac 上使用 Chrome fiddle 时没有显示该错误:/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="showcase" class="grid">
<!-- OTHER STUFF I ARRANGE WITH GRID -->
<form action="#" class="grid">
<input type="text" name="name" placeholder="Name">
</form>
</div>
</body>
</html>
SCSS:
input {
border: 0px;
font-size: 15px;
padding: 1.4em;
}
.grid {
display: grid;
align-items: center;
justify-items: center;
}
#showcase {
grid-template-columns: auto 180px;
form {
background: rgba(34, 34, 30, 0.75);
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1ch;
padding: 3em;
justify-self: stretch;
// All these 3 options get me to the same bug:
justify-items: stretch;
// Same with this option:
input {
width: 100%;
}
// Or this one:
input {
justify-self: stretch;
}
}
}
我希望有人有想法并且可以帮助我。
最佳答案
这似乎真的是 Chrome 中与网格系统结合处理输入字段的错误。我将输入字段包装在 div 中，现在它就像一个魅力。
感谢@Michael_B 指出正确答案: https://stackoverflow.com/a/44934676/2224874
关于html - 仅在 Mac 上的 Chrome 中输入时输入字段变小(可能是 CSS-Grid 问题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47831375/