在 Chrome 中使用 Bootstrap 粘性导航栏的 1px 空间

Question

我正在完成http://www.mimicmuziek.nl 的工作。我在导航栏上使用了 bootstrap .sticky-top 类，但是当我使用 Chrome 时，导航栏上方似乎有一个 1px 的微小间隙，我可以看到内容。使用 Safari 时不会发生。任何有关如何解决此问题的想法将不胜感激！

编辑：我刚刚在我女朋友的电脑上试了一下，在那里工作正常

Answer 1

更新：

我发现了这个：https : //bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

不仅是 Bootstrap。

https://codepen.io/anon/pen/vdgzdb

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.content {
  height: 50px;
}

<h1>Animals by Alphabet</h1>

<div class="container">
  <div class="heading">A</div>
  <div class="content">American Buffalo</div>
  <div class="content">Aardvark</div>
  <div class="content">Alligator</div>  
  <div class="content">Antelope</div>    

  <div class="heading">B</div>
  <div class="content">Baboon</div>
  <div class="content">Bat</div>
  <div class="content">Blue Bird</div>
  
  <div class="heading">C</div>
  <div class="content">Cat</div>
  <div class="content">Camel</div>
  <div class="content">Chicken</div>  
  <div class="content">Chipmunk</div>    

  <div class="heading">D</div>
  <div>Dog</div>
  <div>Donkey</div>
  <div>Dave</div>  
  <div>Duck</div>      
</div>

当sticky-ed元素低于其他div时，它可以被复制。

当我删除h1元素时，它表现良好。

但是您知道，有时必须存在一个元素。我在img标签下面放了一个sticky-ed元素，出现了1px的间隙。当我设置img一定的高度时，它就起作用了。

我认为类似 Chrome 的浏览器有问题。由于它在 iOS 上的 wkwebview 和 iOS/macOS 上的 Safari 上表现完美。并且在支持闪烁的 Android webview 上有 1px 的差距。

Answer 2

我注意到，只有当 isnavbar和stickytheBootstrap Carousel在 下方滑动时才会发生这种情况navbar。希望这能帮助人们调试这个问题。