我一直在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>,因此出现了水平滚动条.的height: 100%;还响应<body>高度,而不是窗口的高度,所以,例如,我的<header>具有20像素的顶缘,和滑杆指出余量太(所述主体具有0余量).同样地,它不是height: 100%;在窗口底部的结尾,而是在底部结束,从而<body>考虑页脚的底部边缘.
我无法理解为什么会发生这种情况.元素检查显示所有属性都正常加载,在Chrome和Safari中它可以正常工作.它最初工作,它最后一次我甚至编辑了导航,但它已经停止工作,因为我建立了网站的其他,不相关的部分.