position: sticky 在 Chrome 中的元素周围添加一些 space

Question

描述

我有一个 <header> 元素，它使用 position: sticky 在用户滚动经过它时固定在页面顶部。似乎在 Chrome 中，所述元素没有按预期显示，而是在元素的顶部和左侧添加了一些 space。我设法从我的 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 中的样子。注意元素左侧和顶部的小 space。

备注

据我所知，我的 CSS 的其余部分并没有真正影响元素的样式，正如您从 Codepen 和提供的代码片段中看到的那样。
由于这个错误出现在我的CSS框架中，为了避免自我推销，项目的名称和标志已从截图中删除。
根据前面的说明，我更喜欢纯粹的 CSS 解决方案（没有 Javascript 或对 HTML 的更改），除非有 none .
我可以在 Android 5.0.2 上的 Chrome 56.0.2924.87 和 Windows 上的 Chrome 57.0.2987.98（64 位）中成功重现该错误7（64 位）。

Answer 1

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

Answer 2

现在我明白你想说什么了，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>

Answer 3

我遇到了同样的问题。这是我修复它的方法。

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

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

希望对大家有所帮助。

position: sticky 在 Chrome 中的元素周围添加一些 space

position: sticky adds some space around element in Chrome

html

css

google-chrome

sticky

描述

代码示例（也可作为 Codepen）

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

备注