posizionamento fisso non funziona in Firefox

ho seguente codice HTML nella mia pagina web dove voglio mantenere la barra laterale fissa sul side.It sinistra funziona bene in Chrome, ma Firfox non visualizza la barra laterale come fissato:posizionamento fisso non funziona in Firefox

<div id="sidebar"> 
    <!-- Logo --> 
     <div > 
      <h1>Heading</h1> 
     </div> 
      <!-- Nav --> 
       <nav id="nav"> 
        <ul> 
         <li><a href="#target1" >About</a></li> 
         <li><a href="#target2" >Works</a></li> 
         <li><a href="#target3" >Our Team</a></li> 
         <li><a href="#target4" >Contact</a></li> 

        </ul> 
       </nav> 

</div>

il CSS per il codice sopra è:

#sidebar 
{ 
    position: fixed; 
    top: 0; 
    padding: 3em 1.35em 1em 1.15em; 
    height: 100%; 
    width: 12em; 
    background: #364050 ; 
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15); 
}

per favore mi suggeriscono qualche soluzione in modo che la barra laterale rimarrà risolto in Firefox.

DOWNVOTERS SI PREGA DI PRIMA COMMENTO.

fonte

2013-07-19 vertexion

sembra funzionare bene per me. aggiungerei anche a sinistra: 0; al tuo css – shammelburg

Puoi descrivere cosa succede in Firefox? Ancora meglio, crea un [violino] (http://jsfiddle.net) e mostraci. Inoltre, potresti provare ad aggiungere 'left: 0;' a '# sidebar' – Luke

Impossibile vedere qualcosa di sbagliato: http://jsfiddle.net/sH4ZX/ – melancia

Controlla i tag css del tuo corpo, i meta e tutto ciò che potrebbe influire su quel div. Forse c'è un'altra regola css che sovrascrive quella 'posizione' Inoltre, se hai css3 tag o errori nel corpo css, ad esempio, transform: translate3d(0px, 0px, 0px); che potrebbe rendere la posizione fissa si interrompe in Firefox.

fonte

2013-11-27 17:12:30 Jorge

Questo era esattamente il mio problema. Grazie! –

Ho anche avuto problemi con 'backface-visiblity: hidden' su' 'causando la rottura di tutti gli elementi' position: fixed'. La rimozione ha risolto il problema in Firefox. – shshaw

+1 per la visibilità del backface da @shshaw. Anche se non so perché funzioni, mi salvi la vita. ;) –

Penso che si dovrebbe cercare di apportare alcune modifiche in voi CSS provare questo css

#sidebar 
{ 
    position: fixed; 
    top: 0; 
    padding: 10px; 
    bottom:0; 
    left:0; 
    width:200px; 
    background: #364050 ; 
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15); 
}

io non preferisco usare em per le dimensioni degli elementi che dovrebbe essere in px è possibile utilizzare em Foe dimensione del carattere ecc.

fonte

2013-07-19 08:26:21

#sidebar 
{ 
    position: fixed; 
    top: 0; 
    left:0; 
    padding: 3em 1.35em 1em 1.15em; 
    height: 100%; 
    width: 12em; 
    background: #364050 ; 
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15); 
}

fonte

2013-07-19 08:27:48 shammelburg

Se il problema riguarda i filtri (non le trasformazioni) che causano problemi, allora funzionerà.

Ho avuto un setup del filtro sugli elementi fissi padre ma è cambiato con la larghezza della finestra. Ho notato che quando la larghezza della finestra incrociava questi confini @media (max-width...), l'elemento di posizione fissa si riposizionava esattamente nella posizione in cui doveva trovarsi, indipendentemente dal filtro.

codice originale:

<style> 
    .withFilter { 
    filter: whatever; 
    } 
    #fixed { 
    position: fixed; 
    bottom: 0px; 
    .... 
    } 
</style> 
<body> 
    <div id="a"> 
    <div id="fixed"> 
     at bottom 
    </div> 
    </div> 
    <script> 
    ... lots of stuff ... 
     jQuery("#a").addClass('withFilter'); 
    ... lots of stuff ... 
    </script> 
</body>

codice di lavoro:

.... same stuff .... 
    <script> 
    ... lots of stuff ... 
     setTimeout(function() { 
     jQuery("#a").addClass('withFilter'); 
     }); 
    ... lots of stuff ... 
    </script> 
</body>

basta aggiungere in tempo sufficiente per la posizione fissa a prendere piede e solo dopo che applicare il filtro/trasformare ....

fonte

2015-09-03 18:06:01 user3338098

posizionamento fisso non funziona in Firefox

risposta

Problemi correlati