CSS - “位置：固定”表现为“绝对”在Firefox [英] CSS - "position: fixed" acting like "absolute" in Firefox
问题描述
我在Safari中建立了一个网站，我刚刚在Firefox中测试过，我的固定导航元素的行为好像它们的位置是绝对的。
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
这是我对主导航包装的CSS 。）。在Webkit中，它完美地工作：即，它粘贴到窗口的底部。在firefox中，它将自己定位在标签的结尾，因此，例如，在长页面上，我必须向下滚动才能看到它。
This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is acting as if it's absolute.
我也有一个侧边栏导航。
I also have a sidebar navigation.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
这个侧边栏也表现为绝对的 - 本身关闭屏幕，但它正在延长< body> ，因此水平滚动条出现。 height：100％; 也响应< body> 高度而不是窗口高度，例如，我的< header> 具有20px的顶部边距，滑动条也观察到边距（主体具有0边距）。同样，代替在窗口底部结束的 height：100％; 结束于< body> code>，考虑页脚的底部边距。
This sidebar is also acting as if it's absolute - that is, it is positioning itself off the screen properly, but it's elongating <body> and thus the horizontal scrollbar appears. The height: 100%; is also responding to the <body> height and not the window height, so, for example, my <header> has a top margin of 20px, and the slidebar observes that margin too (the body has 0 margin). Likewise, instead of the height: 100%; ending at the bottom of the window, it ends at the bottom of the <body>, factoring in the footer's bottom margin.
我无法理解我的生活为什么会发生这种情况。元素检查显示所有的属性加载精细，在Chrome和Safari它的工作原理。它最初工作，它的最后一次我甚至编辑了导航，但它已经停止工作，因为我建立了其他，不相关的网站的部分。
I cannot understand for the life of me why this is happening. Element inspection shows all the properties are loading fine, and in Chrome and Safari it works. It worked initially, and it worked the last time I even edited either navigation, but it has since stopped working since I built other, irrelevant, parts of the site.
< a href =http://www.upprise.com/demo.php> http://www.upprise.com/demo.php - 点击信封图标即可查看侧边栏
http://www.upprise.com/demo.php - click the Envelope icon to see the sidebar
p>
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
我最初添加了这个代码，以防止在整个网站的某些CSS转换中出现闪烁，但我猜我现在必须将它添加到每个单独的类中。
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
这篇关于CSS - “位置：固定”表现为“绝对”在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
