在 Firefox(版本 19.0.2)中,当使用 position: fixed
将元素定位到页面右侧时,该元素相对于窗口滚动条右侧的窗口视口(viewport)定位。
但是,当我们更改定位值时悬停时,元素是相对于窗口视口(viewport)定位的,不包括窗口滚动条。
在下面的示例中,这会导致元素从滚动条的右侧移动到悬停时滚动条的下方。
我已将问题隔离开来,看它不是由 body
、html
或其他任何设置的任何其他 css 设置引起的,但我找不到原因对于这个问题。
HTML
<a href="#Top" id="ScrollToTop">Top</a>
CSS
#ScrollToTop {
position: fixed;
right: 0px;
bottom: -10px;
width: 50px;
height: 50px;
background: #ffffff;
color: #000000;
}
#ScrollToTop:hover {
bottom: 0;
}
发生这种情况是否有原因?这是浏览器错误吗?有办法解决这个问题吗?
最佳答案
经过一番调整后,我的解决方案是将 ScrollToTop anchor 放在另一个固定位置的 div 中。
HTML
<div id="ScrollToTopHolder"><a href="#Top" id="ScrollToTop">Top</a></div>
CSS
body {
height: 2000px;
background: #990000;
}
#ScrollToTopHolder {
position: fixed;
width:100%;
bottom:0px;
}
#ScrollToTop {
position: absolute;
right: 0px;
bottom: -10px;
width: 50px;
height: 50px;
line-height: 50px;
background: #fff;
color: #000;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: 15px;
font-weight: bold;
z-index: 1000;
border: solid 1px #000;
border-bottom: none;
border-radius: 10px 10px 0 0;
transition: all 0.4s;
}
#ScrollToTop:hover {
bottom: 0px;
}
当您移动固定 anchor 位置并重新对齐时,Firefox 似乎不喜欢它。
关于Firefox 中滚动条下的 CSS 固定位置移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15779203/