html - 影响内部绝对定位元素的固定元素的顶级属性

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