Question

我一直在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>的上边距为20px，滑块也会观察到该边距（身体有0保证金）。同样地，它不是在窗口底部结束的height: 100%;，而是在<body>的底部结束，将页脚的底部边距考虑在内。

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

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

Answer 1

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

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

我最初添加此代码是为了防止整个网站的某些CSS过渡中的闪烁，但我想我现在必须将它添加到每个单独的类中。

Answer 2

我遇到了完全相同的问题，结果是父元素的以下CSS属性导致了问题。

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

Answer 3

似乎某些浏览器将相对于窗口应用固定定位，而Firefox相对于<body />应用它。您需要让body 100％高：

body {
    height: 100%;
}

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

margin: 25px auto;

到此：

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

Answer 4

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

...因此

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

... ...成为

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

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

有两件事让我得出这个结论：

@ Pankaj的回答显示，翻译值可能会导致问题。
@Wildhoney对另一个答案的评论引用了对根本原因的解释：http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

Answer 5

问题似乎在你体内，我增加了宽度：100％;高度：100％;溢出：隐藏;它在我的火狐中它看起来很好，除了底部菜单栏，它的底部高度的一半。

Answer 6

不确定为什么浏览器呈现的方式不同，尽管解决方案非常简单。您需要为父元素（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和其他人中正确呈现。

Answer 7

我需要从animateCSS库中删除具有转换的 fixed-on-scroll 元素的高级容器中的一些css类。

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

也许有帮助

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

7 个答案: