在窗口的CSS网格布局奇怪的行为调整
问题描述:
的Chrome版本60.0.3112.78(正式版本)(64位)在Windows 7在窗口的CSS网格布局奇怪的行为调整
我探索CSS网格布局,并在Chrome中所遇到的一个奇怪的问题(在Firefox中工作正常)。我创建了一个简单的注册表单,我想在页面上水平和垂直居中。
我使用三个嵌套网格来构建我的布局。
html {
height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
background: #aaffff;
height: 100%;
}
#root {
height: 100%;
}
button,
input,
label {
font-family: 'Rubik', sans-serif;
font-weight: 600;
}
label {
display: inline-block;
text-align: left;
}
.formGroup {
display: inline-block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
a:link {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
*:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Input {
color: #333;
border: none;
height: 2em;
padding: 5px 10px;
display: block;
/* width: 100%; */
}
.Input:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Button {
display: inline-block;
font-weight: 800;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding: 20px 40px;
border-radius: 4px;
border: none;
background: none;
position: relative;
text-transform: uppercase;
margin: 15px 30px;
}
.Button.primary {
background: #0000ff;
box-shadow: 0 9px #000088;
color: #fff;
}
.Button.primary:hover {
top: 5px;
box-shadow: 0 4px #000088;
}
.Button.primary:active {
top: 9px;
box-shadow: none;
}
.Button.primary:focus {
outline-width: 3px;
outline-color: rgba(0, 0, 255, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.RegistrationForm-container {
display: grid;
grid-template-columns: 3% auto 3%;
grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
grid-column-start: 2;
grid-row-start: 2;
}
.RegistrationForm-container form {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 25px auto 25px;
}
.RegistrationForm-container form .inner {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
grid-column-start: 2;
grid-row-start: 1;
margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
grid-column-start: 2;
grid-row-start: 2;
}
.App {
text-align: center;
height: 100%;
}
<div id="root">
<div class="App">
<div class="RegistrationForm-container">
<div class="copy">
<h1>Register</h1>
<p>
By registering, you agree to our
<a href="/terms">terms of use and privacy policy</a>.
</p>
</div>
<form>
<div class="inner">
<div class="formGroup emailFormGroup">
<input
class="Input"
type="email"
placeholder="Email"
autocorrect="false"
/>
</div>
<div class="formGroup buttonFormGroup">
<button type="submit" class="Button primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
虽然,我的网格布局确实成功了定心,当窗口大小是行为不端。当窗口调整大于原始加载大小,然后缩小窗口时,会出现一个滚动条,并将输入和按钮卡在右侧。
只有在点击页面中的某个位置或按钮,输入和使用条款链接之间的标签之后,它才会自行纠正并恢复到垂直/水平居中。
这里是行为示范:
https://codepen.io/jdoyle/pen/qXadXJ
答
貌似margin:auto
在网格的确开始行动很奇怪。
一种方式来获得你想要的效果,但避免了错误将设置
text-align: center;
在
emailFormGroup
,然后在电子邮件输入删除display: block
。
+2
更适合我想说这是向Chrome问题跟踪器报告的(如果它尚未报告),因为它肯定是一个错误。 – Don
我似乎无法重现该问题:(。还有什么是你,让这个怪异的行为? –
您正在使用什么版本的Chrome浏览器测试? –
60.0.3112.78(官方Build)(64-bit) –