影响内部绝对定位元素的固定元素的 top 属性

Question

我为我的导航栏创建了一个汉堡图标。外部容器固定，内部杆绝对定位。问题是，当我将 top 属性应用于外部固定元素时，它会影响内部条形的高度。为什么会发生这种情况，我该如何阻止它？

这是我创建的一个小演示：

div{
    position: fixed;
    /*top: 3.4em;  /*uncomment this to see the problem*/ 
    right: 5em;
    height: 2em;
    width: 2em;
    cursor: pointer;
    z-index: 50;
    background-color: #ffffff;
    border: 0.063em solid #ff6633;
    border-radius: 0.313em;
}
span{
    display: block;
    position: absolute;
    height: 0.2em;
    width: 1.5em;
    background-color: #ff6633;
    left: 0.25em;
}
span:nth-child(1){
  top: 0.25em;
}
span:nth-child(2){
  top: 0.863em;
}
span:nth-child(3){
  top: 1.438em;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

https://jsfiddle.net/ezp43625/

Answer 1

这似乎是浏览器渲染问题。如果放大或检查高度，则三条线显示相同的高度。因此，您可以尝试更改顶部偏移量。对我来说，它看起来不错

top: 3.5em