边缘-顶部和位置:边缘粘滞

Question

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

更新的这里是完整页面示例https://codepen.io/galuka/full/qBZJOeJ的URL

更新了2看起来像新的微软边缘基于Chromium，所以问题只出现在非Chromium版本上。

下面是这个问题的一个简化示例：

​

.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 In，而不是80 in。

我还注意到，如果我向容器类(例如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非常陌生，所以如果有人能解释这种行为，我会非常感激的。

Answer 1

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

*{
    margin: 0;
    padding: 0;
}

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