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

问题描述

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

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

此屏幕截图来自 Firefox：

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

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

我发现了这个 Firefox 错误，不确定它是否相关。

HTML：

<!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>

CSS：

#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;
}

JSFiddle 全屏视图

JSFiddle 编辑器

标签： cssgoogle-chromefirefoxcross-browserchromium

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

问题描述

解决方案

推荐阅读