火狐浏览器中带滚动条的CSS固定位置移动问题

Question

在Firefox（版本19.0.2）中，当使用position: fixed将元素定位到页面右侧时，元素相对于窗口视口定位在窗口滚动条的右侧。

然而，在悬停时更改定位值后，元素相对于窗口视口定位，不包括窗口滚动条。

在下面的示例中，这会导致元素从滚动条右侧移动到悬停下方。

我已经分离出问题，发现它不是由设置在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;
}

示例

这是因为什么原因呢？这是浏览器的bug吗？有没有办法来解决这个问题呢？

- 3dgoo

Answer 1

经过一些调整，我的解决方案是将ScrollToTop锚点放在另一个固定位置的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;
}

JSFiddle

看起来Firefox不喜欢当您移动固定的锚点位置并重新对齐它。

- Turnerj

---

刚刚遇到一个类似的网站问题。自从Firefox版本19以后，只在Firefox浏览器中出现这个问题。 - user1616625

多么垃圾的浏览器 ;) - Andy Ray

Answer 2

另一种解决办法是使用min-width而不是width来固定位置的div：https://dev59.com/anDXa4cB1Zd3GeqP-ko1#15705522。

- benkol