首页 文章

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

提问于
浏览
16

我一直在Safari中 Build 一个网站,我刚刚在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> 具有20px的上边距,并且滑动条也观察到该边距(主体具有0边距) . 同样地,它不是在窗口底部结束的 height: 100%; ,而是在 <body> 的底部结束,从而考虑页脚的底部边距 .

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

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

7 回答

  • 4

    我有完全相同的问题,结果是父元素的以下CSS属性导致了问题 .

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

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

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

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

  • 1

    似乎某些浏览器将相对于窗口应用固定定位,而Firefox相对于 <body /> 应用它 . 你需要让你的 body 高100%:

    body {
        height: 100%;
    }
    

    但是.header的边距会在body元素之外折叠 . 改变这个:

    margin: 25px auto;
    

    对此:

    margin: 0 auto; /* updated - thanks JoshC */
    padding: 25px auto;
    
  • 2

    问题似乎在你的身体,我增加了宽度:100%;高度:100%;溢出:隐藏;它在我的火狐中它看起来很好,除了底部菜单栏,它的底部高度的一半 .

  • 18

    我通过将使用 position: fixed; 的元素移出其使用 transform: translateX(-50%); 的原始父元素来解决了这个问题 .

    从而...

    <div class="transformed-container">
       <div="fixed-element"></div>
    </div>
    

    ... ...成为

    <div class="transformed-container"></div>
    
    <div class="fixed-element"></div>
    

    有两件事让我得出这样的结论:

  • 1

    虽然解决方案非常简单,但不确定为什么浏览器的渲染方式不同 . 您需要为父元素( html / body )指定 100% 的高度才能填充整个页面 . 似乎FF渲染内容底部的固定元素而不是窗口底部 . 添加以下内容将使其适用于各种浏览器:

    html, body {
        height: 100%;
    }
    

    此外,您还应该在 .header 元素上使用填充而不是边距 . 这将解决另一个问题 .

    .header {
        margin: 0 auto;    /* use a value of 0 rather than 25px */
        padding: 25px 0;
    }
    

    我在浏览器中测试了所有这些,现在它将在FF中运行 . 它也应该在Chrome和其他人中正确呈现 .

  • 2

    我需要从animateCSS库中从具有转换的固定滚动元素的高级容器中删除一些css类 .

    $(window).on('scroll', function () {
         if (distance <= 65) {
            $('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
    Add your code
     });
    

    也许有帮助

相关问题