Различные результаты CSS сетки в Chrome и MS Edge

Question

Я довольно новичок в веб-разработке, поэтому я не совсем уверен, что здесь не так.Я использую сетку начальной загрузки.Вот код:

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;

То, что я хочу сделать, это сделать центрированное поле для входа в систему, и когда я хочу добавить больше «ящика» в контейнер-сетку, я могу расположить их на основевыровняйте self и justify-self, чтобы grid-контейнер мог действовать как элемент управления WPF Grid.

Любая помощь приветствуется.

Другой пример (тот же .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 из-за position: absolute в моем css-коде. Мне удалось не использовать абсолютное позиционирование, и все работает хорошо. В любом случае, спасибо за помощь! :)

Answer 2

Чтобы решить вашу проблему, просто удалите display: grid из контейнера сетки и display: flex и justify-content: center и align-items: center.Теперь .grid-container должно быть следующим:

 .grid-container {
    display: grid;
    justify-content: center;
    align-items: center;
    overflow: auto;
    height: inherit;
    width: inherit;
}

и удалите align-self: center; justify-self: center; из вашего .login-box, чтобы .login-box было следующим:

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

вы можетенайти обновленную скрипку здесь .

В общем, поскольку вы не используете CSS Grid, я бы посоветовал сбросить display: grid, как при нацеливании на IE, использование display: grid не рекомендуется.подход, поскольку поддержка ограничена IE 10+, и даже тогда поддержка является частичной , а для более старой спецификации сетки, например, justify-self justify-content align-self align-content, не поддерживаются или зазубрины.

Не стесняйтесьзадавать любые вопросы, если что-то неясно.