移动chrome中的固定位置答案

【问题标题】：fixed position in mobile chrome移动chrome中的固定位置
【发布时间】：2016-06-07 06:17:48
【问题描述】：

我在移动 Chrome 中遇到了固定位置元素的问题。当我在不重新加载页面的情况下上下滑动时，固定顶部元素和视口顶部之间会出现一点间隙。

要复制此错误，最简单的方法是在移动 Chrome 中尝试引导示例 https://getbootstrap.com/examples/navbar-fixed-top/。在不重新加载页面的情况下向上和向下滑动，经过几次尝试，您应该会看到一个间隙。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在大多数主流浏览器中，默认边距为 8px。它由浏览器提供的用户代理样式表以像素为单位进行定义。

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

如果你想改变它，你可以这样做：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您在div#navbar ul.nav.navbar-nav 上设置了边距 --- 将边距设置为 0。

【讨论】：

【解决方案5】：

看看你的margin和padding是否设置为auto，在这种情况下，margin应该会自动调整。

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

【讨论】：