移动边缘浏览器吞下网页高度的前几个像素答案

【问题标题】：Mobile Edge browser swallows first few pixels of webpage height移动边缘浏览器吞下网页高度的前几个像素
【发布时间】：2021-09-23 00:27:30
【问题描述】：

我注意到 Android 上的移动 Edge 浏览器会占用网页高度的前几个像素，而不是用地址栏覆盖它，从而使您无法看到内容。

这发生在我正在进行的一个项目中，但这是一个最小的重现。它是一个高度为 1px 的红色框，附在页面的最顶部（至少应该如此！）。

<html>
<head>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 30px;
            height: 1px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

但实际上，当我在 Android 上的移动 Edge 浏览器中打开此页面时，找不到该行。我把上面的代码放在my github pages account。

如果我在连接到我的 PC 时检查页面并在检查器中更改框的顶部边距，我需要添加大约 9px 的顶部边距以使其显示在页面上，这样它就不会被地址栏覆盖。

这给了？这是一个已知的错误？我在做傻事吗？

有人可能会说“只需滚动一点以使栏消失”。当然可以，但这不适用于完全垂直拉伸的网站，例如让地址栏和其他菜单栏保持固定不动。

谢谢！

【问题讨论】：

我用你的示例代码做一个测试。它在 Edge Android 手机中运行良好。您可以查看截图：i.stack.imgur.com/BHqmv.png。我可以看到浏览器左上角的红线。您使用的是哪个版本的 Edge 浏览器？我在 Android 上的 Edge 浏览器版本是 46.06.4.5160。
@YuZhou 我正在运行 93.0.961.53 。你确定你最近更新了你的版本吗...？
我更新了我的 Edge，现在我可以重现该问题。我建议您可以通过点击 Edge mobile 底部的三点图标->发送反馈来提供有关此问题的反馈。 Edge 团队将检查反馈并不断改进产品。
@YuZhou 是的，谢谢，我做到了，并将它们链接到此页面。感谢您抽出宝贵时间进行复制！

标签： html css microsoft-edge

【解决方案1】：

是因为1px太小了，手机看不到盒子

尝试添加更多 CSS。

Margin 和 Padding 只是定义了边框和内框元素之间的间距。

试试这个：

您修改后的代码具有更大的像素和导航栏（或）地址栏：

<html>
<head>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 50px;
            padding:10px;
            background-color: red;
            position:fixed;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="box">
    <h1>Navigation bar</h1>
    </div>
</body>
</html>

【讨论】：

不是盒子大小。例如，如果我给它一个 20px 的 margin-top，我可以看到它。