页边距和位置：在Edge处发粘

问题描述

我正在尝试创建粘性标头，并注意到在Edge中，标头的页边距由于某种原因而加倍。

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

更新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中，边距看起来像是160px而不是80px。

我还注意到，如果我在容器类中添加任何正填充，例如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还是很陌生，所以如果有人可以解释这种行为，我将非常感激。

解决方法

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

*{
    margin: 0;
    padding: 0;
}

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