当我滚动时,我有一个固定位置的 div,它位于屏幕底部,而不是移动。然而,在 Safari 上,这个 div 就像它是绝对定位的一样,并随着其余内容上下移动。当我单击“检查元素”时,突出显示编程的(所需)位置,而不是视觉(实际?)位置。
我无法在小提琴中重新创建这个问题。这在 Chrome、FF 或 IE (10+) 中不会发生。
这是视觉(字符计数框)和编程位置(突出显示区域)之间差异的屏幕截图。
在这些之上还有更多实际的 css 和 html 层,但这里是直接代码:
html简化
<article class="parent">
<article class="inner-wrapper">
<div id="counter">
Character Count: <span class="tally">*javascript calculation*</span>
</div>
</article>
</article>
scss
article.parent {
max-width: rem(640);
margin: 0 auto rem(30) auto;
padding: 0 rem(10);
#counter {
position: fixed;
border: #888 solid 1px;
bottom: 130px;
left: 10px;
border-radius: 5px;
padding: 10px;
background: rgba(255, 255, 255, .8);
font-size: .8em;
min-width: 150px;
}
}
我怎样才能让这个 div 在 Safari 中运行,以便视觉位于编程位置的顶部?