我一直在Safari中建立一個(gè)網(wǎng)站，我剛剛在Firefox中測(cè)試了它，我的固定導(dǎo)航元素表現(xiàn)得好像它們的位置是絕對(duì)的。

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

這是我的主要導(dǎo)航包裝器的CSS(它是一個(gè)底部導(dǎo)航。).在Webkit中，它工作得非常好:也就是說(shuō)，不管怎樣，它都粘在窗口的底部。在firefox中，它把自己放在標(biāo)簽的末尾，所以，例如，在一個(gè)很長(zhǎng)的頁(yè)面上，我必須向下滾動(dòng)才能看到它。它表現(xiàn)得好像它是絕對(duì)的。

我也有一個(gè)側(cè)邊欄導(dǎo)航。

.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;
}

這個(gè)側(cè)邊欄也表現(xiàn)得好像它是絕對(duì)的——也就是說(shuō)，它把自己正確地放置在屏幕之外，但是它在拉長(zhǎng)& ltbody & gt因此出現(xiàn)水平滾動(dòng)條。高度:100%；也在響應(yīng)& ltbody & gt高度而不是窗口高度，因此，例如，我的& lt標(biāo)題& gt有一個(gè)20px的上邊距，slidebar也遵守這個(gè)邊距(正文沒有邊距)。同樣，代替高度:100%；結(jié)束于窗口的底部，它結(jié)束于& ltbody & gt，考慮頁(yè)腳的下邊距。

我無(wú)論如何也不明白為什么會(huì)發(fā)生這種事。元素檢查顯示所有屬性都可以正常加載，并且在Chrome和Safari中可以正常工作。它最初是有效的，甚至在我最后一次編輯這兩個(gè)導(dǎo)航時(shí)也是有效的，但是自從我建立了這個(gè)網(wǎng)站的其他不相關(guān)的部分后，它就停止工作了。

http://www.upprise.com/demo.php-點(diǎn)按信封圖標(biāo)以查看邊欄

我遇到了完全相同的問(wèn)題，結(jié)果是父元素的以下CSS屬性導(dǎo)致了這個(gè)問(wèn)題。

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

通過(guò)排除的過(guò)程，我能夠確定我體內(nèi)的以下物質(zhì)導(dǎo)致了Firefox中修復(fù)的div的所有問(wèn)題:

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

我最初添加這段代碼是為了防止整個(gè)站點(diǎn)中某些CSS轉(zhuǎn)換的閃爍，但是我想我現(xiàn)在必須將它添加到每個(gè)單獨(dú)的類中。

看起來(lái)一些瀏覽器將應(yīng)用相對(duì)于窗口的固定位置，而Firefox應(yīng)用相對(duì)于& ltbody/>；。你需要讓你的身體100%高:

body {
    height: 100%;
}

但是你的保證金。標(biāo)題在主體元素外折疊。改變這一點(diǎn):

margin: 25px auto;

對(duì)此:

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

我通過(guò)移動(dòng)使用位置的元素解決了這個(gè)問(wèn)題:fixed使用transform: translateX(-50%)的原始父元素；。

因此...

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

...成為...

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

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

兩件事讓我得出這個(gè)結(jié)論:

@Pankaj的回答表明translate值會(huì)引起問(wèn)題。 @Wildhoney對(duì)另一個(gè)答案的評(píng)論引用了對(duì)底層原因的解釋:http://Meyer web . com/Eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-CSS-transforms/ 問(wèn)題好像出在你身上，我加了寬度:100%；身高:100%；和溢出:隱藏；在我的火狐上，它看起來(lái)很好，除了底部的菜單欄比底部高出了一半。

不知道為什么瀏覽器呈現(xiàn)不同，雖然解決方案很簡(jiǎn)單。你需要給父元素(html/body)一個(gè)100%的高度來(lái)填充整個(gè)頁(yè)面。似乎FF將固定元素呈現(xiàn)在內(nèi)容的底部，而不是窗口的底部。添加以下內(nèi)容將使其跨瀏覽器工作:

html, body {
    height: 100%;
}

此外，您還應(yīng)該使用填充。與邊距相對(duì)的標(biāo)題元素。這將解決另一個(gè)問(wèn)題。

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

我在瀏覽器中測(cè)試了所有這些，它現(xiàn)在可以在FF中工作了。它也應(yīng)該能在Chrome和其他瀏覽器中正常顯示。

我需要從animatecss庫(kù)中的fixed-on-scroll元素的上級(jí)容器中刪除一些CSS類。

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

也許會(huì)有幫助

經(jīng)過(guò)5個(gè)小時(shí)的調(diào)試，如果你正在使用tailwindcss，并且在你的一個(gè)父元素上有drop-shadow-*(注意不是shadow-*)類，它將導(dǎo)致該元素中的固定元素表現(xiàn)得像是絕對(duì)定位的。

不知道為什么會(huì)這樣，可能是因?yàn)閠ailwindcss使用了大量的css變量。

下面是一個(gè)使用tailwindcss drop-shadow-*實(shí)用程序生成的示例，似乎父元素之一上的filter屬性導(dǎo)致了與transforms相同的意外行為:

.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);
}

我也有同樣的問(wèn)題。 在我的例子中，問(wèn)題的根源是身體上的動(dòng)畫，所以要小心& quot動(dòng)畫& quot在作為您要成為的元素的父元素的元素上位置:固定& quot。

我不知道為什么會(huì)這樣...

在這里你可以看到更多的人談?wù)撨@個(gè)問(wèn)題與立場(chǎng):固定和動(dòng)畫