css - Chrome 和 MS Edge 中 css 网格的不同结果

Question

我在网络开发方面还很新，所以我不太确定这里出了什么问题。我正在使用引导网格。这是 CSS:

body {
    background: #252525;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    height: 100%;
    width: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.grid-container {
    display: grid;
    overflow: auto;
    height: inherit;
    width: inherit;
}

.grid-container > * {
    position: absolute
}


.login-box {
    align-self: center;
    justify-self: center;
    width: 80%;
    max-width: 450px;
    min-width: 250px;
    padding: 0;
}

HTML:

<div class="grid-container">
            <div class="login-box container-fluid">
                <div class="row">
                    <form id="frmLogin">
                        <div class="col-md-12 clear-margin-padding text-center">
                            <h4>Login to service</h4>
                        </div>

                        <div class="col-md-12 clear-margin-padding" style="margin-top: 10px;">
                            <table>
                                <col width="90">
                                <col width="*">

                                <tr>
                                    <td>Email</td>
                                    <td><input type="email" id="txtEmail" required></td>
                                </tr>

                                <tr>
                                    <td>Password</td>
                                    <td><input type="password" id="txtPassword" required></td>
                                </tr>
                            </table>
                        </div>

                        <div class="col-md-12 clear-margin-padding text-center" style="margin-top: 10px">
                            <div class="wrap-panel">
                                <button type="button" id="btnRegister">Register</button>
                                <button type="submit" id="btnLogin">Login</button>
                            </div>
                        </div>
                    </form>

                    <div class="col-md-12 clear-margin-padding text-center" style="margin-top: 5px">
                        <a href="/recovery">Forgot my password</a>
                    </div>
                </div>
            </div>
        </div>

我不确定这里谁错了，但肯定是由于

position: absolute;

我想要完成的是使登录框居中，当我想向网格容器添加更多“框”时，我可以根据 align-self 和 justify-self 定位它们，以便网格容器可以运行就像 WPF 的网格控件。

感谢任何帮助。

另一个例子(相同的 .grid-container):

HTML:

<div class="grid-container">
            <div style="width:100px;height:100px;align-self:start;justify-self: left;background: black"></div>
            <div style="width:100px;height:100px;align-self:center;justify-self: center;background: black"></div>
            <div style="width:100px;height:100px;align-self:end;justify-self: right;background: black"></div>
        </div>

MS Edge

Chrome

Answer 1

我认为这是 ms edge 的错误，因为我的 css 代码上有 position: absolute。我已经设法不使用绝对定位并且一切正常。无论如何感谢您的帮助! :)