描述
我有一个 <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 似乎不能正确地显示它(请参见下一张图片)。
这张图片展示了 Chrome 中 <header>
元素的样子。请注意元素左侧和顶部留下的一小块空白。
注解
- 据我所知,我的 CSS 的其余部分并没有真正干扰元素的样式,您可以从提供的 Codepen 和片段中看到。
- 由于这个 bug 出现在我的 CSS 框架中,项目名称和徽标已被移除以避免自我推销。
- 鉴于上述注意事项,我更喜欢纯 CSS 解决方案(不涉及 JavaScript 或更改 HTML),除非没有其他办法。
- 我可以在 Android 5.0.2 上的 Chrome 56.0.2924.87 和 Windows 7(64 位)上的 Chrome 57.0.2987.98(64 位)中成功重现此 bug。
position:sticky
之前,请查看此链接http://caniuse.com/#search=position%3A%20sticky,因为它不兼容所有浏览器。 - AG_