CSS - "位置:固定"在Firefox中表现得像"绝对"

 nora抹抹茶I 发布于 2023-01-30 15:18

我一直在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;
}

这个侧边栏也表现得好像它是绝对的 - 也就是说,它正确地将自己定位在屏幕外,但它是伸长的,因此出现了水平滚动条.的height: 100%;还响应高度,而不是窗口的高度,所以,例如,我的

具有20像素的顶缘,和滑杆指出余量太(所述主体具有0余量).同样地,它不是height: 100%;在窗口底部的结尾,而是在底部结束,从而考虑页脚的底部边缘.

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

http://www.upprise.com/demo.php - 单击"信封"图标以查看侧栏

2 个回答
  • 通过消除过程,我能够确定在我的身体中有以下内容导致Firefox中固定div的所有问题:

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

    我最初添加此代码是为了防止整个站点中某些CSS转换中的闪烁,但我想我现在必须将它添加到每个单独的类中.

    2023-01-30 15:19 回答
  • 我有完全相同的问题,结果是父元素的以下CSS属性导致了问题.

    transform: translate3d(0px, 0px, 0px);
    

    2023-01-30 15:20 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有