时间戳

首页 > 解决方案 > margin-top 和 position: 粘在 Edge

html - margin-top 和 position: 粘在 Edge

问题描述

我正在尝试创建一个粘性标题，并注意到在 Edge 中，由于某种原因，标题的边距翻了一番。

已更新 这是整页示例 https://codepen.io/galuka/full/qBZJOeJ上的 URL

更新 2 看起来基于 Chromium 的新 Microsoft Edge 工作正常，因此问题仅出现在非 Chromium Edge 版本上。

这是该问题的简化示例：

.container {
  margin: 0 auto;
  width: 600px;
}
.sticky {
  margin-top: 80px;
  position: sticky;
  top: 0;
  background-color: orange;
  height: 100px;
}
<div class="container">
  <div class="sticky">
    Here goes sticky header
  </div>
  <div>
    Lorem ipsum dolor sit amet, ...
  </div>
 </div>

在 Chrome 和 Firefox 中，它按预期工作，但在 Edge 中，边距看起来像 160 像素而不是 80 像素。

我还注意到，如果我向容器类添加任何正填充，例如 1px，则可以解决该问题。

.container {
  margin: 0 auto;
  width: 600px;
  padding-top: 1px;
}
.sticky {
  margin-top: 80px;
  position: sticky;
  top: 0;
  background-color: orange;
  height: 100px;
}
<div class="container">
  <div class="sticky">
    Here goes sticky header
  </div>
  <div>
    Lorem ipsum dolor sit amet, ...
  </div>
 </div>

我对 CSS 很陌生，所以如果有人能解释这种行为，我会非常感激。

标签： htmlcssmicrosoft-edgesticky

解决方案

浏览器通过称为用户代理样式表的 CSS 文件实现一些默认样式。为了确保不同浏览器之间的一致性，您应该在 CSS 文件的顶部添加一条小规则。代码将边距和填充清零以确保一致性：

*{
    margin: 0;
    padding: 0;
}

正如您所说，添加填充解决了问题，这绝对是解决方案。此外，您可以右键单击网页上的任何元素并选择inspect element，您将能够看到应用于该元素的所有 CSS。

推荐阅读