Question

我正在建立一个网站，正好在开始时我发现底部有一个奇怪的边缘。这只发生在谷歌浏览器上（当前版本：48.0.2564.97）。

我使用的唯一css是normalize.css和我在下面显示的css，html非常简单，只有索引和{ {1}} div。

注意，在Firefox上没有这个边距，仅限于chrome。看图像（左：firefox，右：chrome）：

在检查chrome上的元素时，html标记是唯一一个包含额外边距的标记。身体和div都以蓝色框结束。

HTML：

with:100vh

的CSS：

//...
</head>
<body>
    <div class="login">
        <h1>Login</h1>
    </div>
</body>
</html>

编辑：

通过在身体上设置html, body { margin:0; padding:0; } html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -moz-box-sizing: inherit; -webkit-box-sizing: inherit; box-sizing: inherit; } .login { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 100vh; background: #cde; }，问题就解决了。但我想更好地了解正在发生的事情，因为没有其他因素可以创造这种差距。

Answer 1

html, body {
    margin:0; padding:0;
}
.login {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100vh;
    background: #cde;
}

<div class="login">
    <h1>Login</h1>
</div>

Answer 2

如果您将身高：100％添加到正文，html 并从 .login中删除身高：100vh ，它的工作：）

铬上的不可见边缘底部

编辑：

2 个答案: