html - 位置 : sticky adds some space around element in Chrome

Question

描述

我有一个 <header>使用 position: sticky 的元素当用户滚动经过它时，坚持到页面的顶部。不知何故，在 Chrome 中，所述元素似乎没有按预期显示，而是在元素的顶部和左侧添加了一些空间。我设法从我的 CSS 文件中分离代码以重现该错误，并在 Chrome(Android 和 Windows 7 桌面)中成功重现它。有谁知道为什么会发生这种情况以及是否有解决方案？

代码示例(也可作为 Codepen 获得)

body {
  margin: 0;
}

header {
  display: block;
  height: 44px;
  background: #263238;
  color: #fafafa;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

header.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  top: 0;
}

<p>Blah blah</p>

<header class="sticky"> 
  <button>Home</button> 
  <button>About</button>
</header>

<!-- some spacing to allow users to scroll the page -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

错误和预期行为的屏幕截图

下图显示了 <header> 的内容元素应该在所有浏览器上看起来都一样。目前，Chrome 似乎无法正确显示此内容(见下图)。

这张图片显示了 <header> 的内容元素看起来像在 Chrome 中。请注意元素左侧和顶部留下的小空间。

注意事项

• 据我所知，我的其余 CSS 并没有真正影响元素的样式，正如您从 Codepen 和提供的代码片段中看到的那样。
• 由于这个错误出现在我的 CSS 框架中，元素的名称和 Logo 已从屏幕截图中删除，以避免 self 宣传。
• 根据前面的说明，我更愿意使用纯 CSS 解决方案(没有 Javascript 或对 HTML 的更改)来解决问题，除非没有。
• 我可以在 Android 5.0.2 上的 Chrome 56.0.2924.87 和 Windows 7(64 位)上的 Chrome 57.0.2987.98(64 位)中成功重现该错误。

Answer 1

现在我明白你想说什么了，box:shadow 在这种情况下是邪恶的。我假设你不能删除它，所以我在 body css 中添加了 overflow:hidden。看看下面的代码片段。

body {
  margin: 0;
  overflow:hidden;
  background: red
}

header {
  display: block;
  height: 44px;
  background: #263238;
  color: #fafafa;
  padding: 2px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

header.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1101;
  top: 0;
}

<p>Blah blah</p>

<header class="sticky"> 
  <button>Home</button> 
  <button>About</button>
</header>

<!-- some spacing to allow users to scroll the page -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>