CSS – “位置：固定”在Firefox中表现为“绝对”

我已经在Safari中建立了一个网站,而且我已经在Firefox中测试过了,我的固定导航元素的行为就像位置是绝对的.

#navigation {
    display: block;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 99000;
}

这是我为主导航包装器(它是一个底部导航)的CSS.在Webkit中,它的工作原理很好：就是说,它贴在窗口的底部.在Firefox中,它将自己定位在标签的末尾,所以,例如,在一个长的页面上,我必须向下滚动才能看到它.它表现得好像是绝对的.

我也有一个侧边栏导航.

.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>因此出现水平滚动条.身高：100％;也正在响应< body>高度而不是窗口高度,所以例如我的< header>具有20px的顶部边距,并且滑块还观察到边缘(身体具有0边缘).同样,而不是高度：100％;结束于窗口的底部,它结束于< body>底部,从而将页脚的底部边缘分解.

为什么我这样发生的事情,我无法理解我的生活.元素检查显示所有属性都正在加载,而在Chrome和Safari中它可以正常工作.它最初工作,最后一次甚至编辑导航,但是自从我建立了其他不相关的站点部分以来,它已经停止工作了.

http://www.upprise.com/demo.php – 点击信封图标查看侧边栏

解决方法

通过消除过程,我能够确定在我的身体中有以下原因导致Firefox中固定div的所有问题：

-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

我最初添加了这个代码,以防止在整个网站的某些CSS转换中闪烁,但我想我现在必须将其添加到每个类.

原文地址：https://www.jb51.cc/css/216760.html