Css 为什么Firefox显示的网格布局与Chromium不同？_Css_Google Chrome_Firefox_Cross Browser_Chromium

Css 为什么Firefox显示的网格布局与Chromium不同？

css google-chrome firefox

Css 为什么Firefox显示的网格布局与Chromium不同？,css,google-chrome,firefox,cross-browser,chromium,Css,Google Chrome,Firefox,Cross Browser,Chromium,我正在尝试构建一个非常简单的网格布局，它应该显示一些容器，如下所示：屏幕截图来自Chromium，它似乎按预期工作。如果激活栅格检查器，我可以看到按预期布置的行轨迹：此屏幕截图来自Firefox：以下是网格检查器的屏幕截图：中间的轨道似乎。。。压缩的我发现了，不确定是否有关联 HTML: 让我立刻想到了这一点：。如果你和fr一起去，它应该会起作用 <!doctype html> <html> <head> <meta cha

我正在尝试构建一个非常简单的网格布局，它应该显示一些容器，如下所示：

屏幕截图来自Chromium，它似乎按预期工作。如果激活栅格检查器，我可以看到按预期布置的行轨迹：

此屏幕截图来自Firefox：

以下是网格检查器的屏幕截图：

中间的轨道似乎。。。压缩的

我发现了，不确定是否有关联

HTML:

让我立刻想到了这一点：。如果你和fr一起去，它应该会起作用

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div align="center" id="container">
        <div id="helpContainer">
            <div>H E L P</div>
            <div>J: left</div>
            <div>K: rotate</div>
            <div>L: right</div>
            <div>space: drop</div>
        </div>
        <div id="gameContainer">
        </div>
        <div id="speedContainer">
            <div>S P E E D</div>
            <span id="current-speed">0</span>
        </div>
        <div id="scoreContainer">
            <div>S C O R E</div>
            <div>
                <span>Best:</span>
                <span id="high-score"></span>
            </div>
            <div id="score">
                <span>Current:</span>
                <span id="current-score">0</span>
            </div>
        </div>
    </div>
</body>

</html>

#gameContainer, #scoreContainer, #helpContainer, #speedContainer {
    border: 1px solid #000000;
}

#container {
    display: grid;
    grid-template-columns: 35% 30% 35%;
    grid-template-rows: 20% 30% 30% 20%;
    justify-items: center;
    align-items: center;
}

#helpContainer {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
}

#gameContainer {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
    width: 500px;
    height: 900px;
}

#speedContainer {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

#scoreContainer {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}