我有一個固定位置div,位於屏幕底部,因爲我正在滾動,而不是移動。然而,在Safari上,這個div就像絕對定位一樣,隨着其他內容上下移動。當我點擊「檢查元素」時,編程的(所需的)位置被突出顯示,而不是視覺(實際的?)位置。固定位置在Safari 7中不起作用
我無法在小提琴中重新創建此問題。這在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中表現出色,以便視覺位於編程位置的頂部?
可以共享HTML和CSS? – 2014-09-29 20:35:58
不幸的是,我不能。我知道這是一個長鏡頭,但我認爲我會嘗試。 – steel 2014-09-29 20:37:11
不,它會很容易我認爲>所以你需要一個div總是附加到窗口的頂部,每當你滾動---如果我沒有錯? – 2014-09-29 20:39:30