移动版Chrome中的固定位置

Question

我在移动版Chrome中遇到了一个固定位置元素的问题。当我上下滑动而不重新加载页面时，固定顶部元素与视口顶部之间会出现一小段间隔。

要复制此错误，请尝试在移动版Chrome中使用Bootstrap示例 https://getbootstrap.com/examples/navbar-fixed-top/ 。 上下滑动而不重新加载页面，并在几次尝试后应该看到一个间隙。

Chrome渲染问题。 body中带有UL的固定位置锚点的最常见答案对我无效：

#element {
    -webkit-transform: translateZ(0);
}

- nullgr4vity

---

我无法在移动版Chrome中重现它，您是否仍然遇到此问题？如果是，请在问题本身中包含相关代码，以便我们复制该问题。一个Stack Snippet会很好。 - Hidden Hobbes

这个间隙有多大？如果只有一个像素，那么我相信这只是一个渲染故障。我无法在自己的设备上重现这个错误。 - Serg Chernata

你确定你有最新版本的Chrome吗？你使用的是哪个设备？ - Ajith Gopi

Answer 1

检查您的body和html是否没有任何边距或填充。还要检查是否有任何div具有负边距或填充。

body, html { margin: 0; padding: 0 };

- Karan Karpe

Answer 2

在大多数主流浏览器中，所有边缘的默认边距为8px。它由用户代理样式表以像素定义。

一些浏览器允许您创建和使用自己的用户代理样式表，但如果您正在开发网站，则建议不要更改此设置，因为您的用户很可能没有修改过的样式表，他们将看到与您不同的页面。

如果您想更改它，只需执行以下操作：

 body {
  margin: 0px;
  padding: 0px;
  ...
  }

- Vrijesh Rathod

Answer 3

尝试将固定元素和和标签的margin-top和padding-top设置为0px。

- Kevin

Answer 4

你的 div#navbar ul.nav.navbar-nav 上设置了外边距 --- 将它的外边距设为 0。

- Nicola Reyes

Answer 5

看看你的边距和填充是否设置为自动，如果是这样，那么边距应该会自动调整。

body, HTML
{
margin:auto;
padding:auto;
}

- user17311472