CSS -“位置：修复了Firefox中的“绝对”行为

aemubtdh 于 2023-06-07 发布在其他

关注(0)|答案(9)|浏览(249)

我一直在Safari中构建一个网站，我刚刚在Firefox中测试了它，我的固定导航元素表现得好像它们的位置是绝对的。

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

这是我为主导航 Package 器准备的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 px，滑动条也观察到该边距（主体的边距为0）。同样，height: 100%;不是在窗口底部结束，而是在<body>的底部结束，考虑到页脚的底部边距。
我无法理解为什么会发生这种事。元素检查显示所有属性都加载正常，在Chrome和Safari中也正常工作。它最初工作，它的工作，甚至在我最后一次编辑任何导航，但它已经停止工作，因为我建立了其他，无关的，网站的部分。
http://www.upprise.com/demo.php-单击信封图标以查看侧边栏

css

来源：https://stackoverflow.com/questions/21440604/css-position-fixed-acting-like-absolute-in-firefox

9条答案

按热度按时间

pdkcd3nj1#

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

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

赞(0）回复(0）举报 2023-06-07

tcomlyy62#

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

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

我最初添加这段代码是为了防止整个站点中某些CSS过渡中的 Flink ，但我想现在必须将其添加到每个单独的类中。

赞(0）回复(0）举报 2023-06-07

91zkwejq3#

看起来有些浏览器会应用相对于窗口的固定位置，而Firefox应用相对于<body />的固定位置。你需要让你的body 100%高：

body {
    height: 100%;
}

但是你的.header中的边距在body元素的外面折叠。更改此：

margin: 25px auto;

对此：

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

赞(0）回复(0）举报 2023-06-07

huus2vyu4#

我通过将使用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.@Pankaj的回答表明translate值可能会导致问题。
1.@Wildhoney对另一个答案的评论引用了对根本原因的解释：http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

赞(0）回复(0）举报 2023-06-07

tcbh2hod5#

问题似乎出在你的身体上，我加了宽度：100%;身高：100%;和溢出：隐藏;它在我的火狐和它看起来很好，除了底部的菜单栏，去了一半的高度超过底部。

赞(0）回复(0）举报 2023-06-07

bnlyeluc6#

不知道为什么浏览器呈现不同，虽然解决方案很简单。您需要给予父元素（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和其他浏览器中正确渲染。

赞(0）回复(0）举报 2023-06-07

kt06eoxx7#

我需要从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
 });

也许会有帮助

赞(0）回复(0）举报 2023-06-07

ssgvzors8#

经过5个小时的调试，如果你正在使用tailwindcss，并且你的父元素之一上有drop-shadow-*（注意它不是shadow-*）类，它将导致该元素中的固定元素表现得像它们是absolute定位的。
不知道为什么会发生这种情况，可能是因为tailwindcss使用了很多组合的CSS变量。
下面是tailwindcss drop-shadow-*实用程序生成的示例，似乎父元素之一上的filter属性会导致与转换相同的意外行为：

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
    filter: var(--tw-filter);
}

赞(0）回复(0）举报 2023-06-07

hof1towb9#

我也有同样的问题。在我的例子中，问题的根源是body上的ANIMATION，所以要注意元素上的“animations”，这些元素是你想要成为“position”的元素的父元素：固定”。
我不知道为什么会这样。
Here你可以看到更多的人谈论这个问题与 * 位置：固定 * 和 * 动画 *

赞(0）回复(0）举报 2023-06-07

我来回答

CSS -“位置：修复了Firefox中的“绝对”行为

9条答案

相关问题

热门标签

最新问答