position: sticky 在 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 和提供的 sn-p 中看到的那样。
• 由于这个错误出现在我的 CSS 框架中，为了避免自我宣传，项目的名称和徽标已从屏幕截图中删除。
• 提供前面的注释，我更喜欢纯 CSS 解决方案（不使用 Javascript 或更改 HTML）来解决问题，除非没有。
• 我可以在 Android 5.0.2 上的 Chrome 56.0.2924.87 和 Windows 7（64 位）上的 Chrome 57.0.2987.98（64 位）中成功重现该错误。

Answer 1

我有同样的问题。这是我修复它的方法。

将overflow: hidden 添加到body 将禁用滚动。所以，我只加了overflow-x: hidden

html,body{
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

我希望它可以帮助其他人。

Answer 2

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

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>

Answer 3

将不支持的position: sticky 替换为position: fixed; width: 100%; 并在所有浏览器上试用。正如@aje 提到的，在使用实验性/新 css3 样式之前总是检查浏览器兼容性。