CSS在Firefox中的滚动条下的固定位置移动 [英] CSS fixed position movement under scrollbar in Firefox

问题描述

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

但是，当我们更改定位值时悬停，元素相对于不包括窗口滚动条的窗口视口定位。

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

我已经孤立的问题，看看它不是由任何其他css设置设置在身体， html

 < a href =＃Topid =ScrollToTop>顶部< / a> 
  

CSS

< pre class =lang-css prettyprint-override> #ScrollToTop {
position：fixed;
right：0px;
bottom：-10px;
width：50px;
height：50px;
background：#ffffff;
color：＃000000;
}
#ScrollToTop：hover {
bottom：0;
}


示例

这是否有原因？这是浏览器错误？有没有办法解决这种情况？

解决方案

经过一点小小的，我的解决方案将把ScrollToTop锚另一个固定位置div。

HTML

 < div id = ScrollToTopHolder>< a href =＃Topid =ScrollToTop>顶部< / 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不喜欢它，重新对齐它。

In Firefox (version 19.0.2) when positioning an element to the right of the page using position: fixed the element is positioned relative to the window viewport right of the window scrollbar.

However, on hover when we change the positioning values, the element is positioned relative to the window viewport not including the window scrollbar.

In the following example this causes the element to move from right of the scrollbar, to underneath the scrollbar on hover.

I have isolated the problem down to see that it is not caused by any other css settings set on body, html or anything else, but I cannot find the reason for this problem.

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;
}

Example

Is there a reason this is occurring? Is this a browser bug? Is there a way to fix this case?

解决方案

After a bit of fiddling, my solution would be to put the ScrollToTop anchor inside another fixed position 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

It seems to be that Firefox doesn't like it when you move the fixed anchor position, re-aligning it.

这篇关于CSS在Firefox中的滚动条下的固定位置移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！