1
的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
https://plnkr.co/edit/rzAAAsfgPVUfxxmXlqYa?p=preview
我似乎無法重現該問題:(。還有什麼是你，讓這個怪異的行爲？ –
您正在使用什麼版本的Chrome瀏覽器測試？ –
60.0.3112.78（官方Build）（64-bit） –