Feste Positionierung funktioniert nicht im Firefox

Habe ich folgenden HTML-Code in meine Webseite, wo ich will, dass die sidebar fixiert auf der linken Seite.Es funktioniert in Chrome, aber Firfox ist nicht die Anzeige der sidebar als Feste :

<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>

den CSS-Code für obigen code ist :

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

bitte machen Sie mir einige Lösung, so dass die sidebar bleibt fest in Firefox.

DOWNVOTERS BITTE KOMMENTAR ERSTE.

scheint zu funktionieren gut für mich. ich würde auch hinzufügen left:0; zu Ihrer css
Können Sie beschreiben, was passiert in Firefox? Noch besser, machen Sie einen Geige und uns zeigen. Auch, möchten Sie vielleicht versuchen Sie left: 0; zu #sidebar
Kann nicht sehen, nichts falsch: jsfiddle.net/sH4ZX
link wurde Hinzugefügt, um der Frage.eigentlich eine mehr-Selektor anwenden von Stil die sidebar enthält nur left:0.Ich habe versucht, indem position : fixedzu dieser Selektor, aber es funktioniert nicht.

InformationsquelleAutor vertexion | 2013-07-19

  1. 7

    Überprüfen Sie Ihren body-css-tags, metas, und alles, was diese beeinträchtigen könnte, dass div. Vielleicht gibt es eine andere css-Regel überschreiben, 'position'
    Auch, wenn Sie css3-tags oder Fehler in den body-css, zum Beispiel, transform: translate3d(0px, 0px, 0px); machen könnte, festen position brechen in Firefox.

    Das war genau mein problem. Danke!
    Ich hatte auch Probleme mit backface-visiblity: hidden auf die <body> wodurch alle position: fixed Elemente zu brechen. Entfernen, dass das Problem in Firefox.
    +1 für backface-visibility von @shshaw. Auch wenn ich nicht weiß, warum es funktioniert, aber du, mein Leben zu retten. 😉
    scheint css filter: ... wird auch dazu führen position: fixed nicht auf firefox...

    InformationsquelleAutor Jorge

  2. 0

    ich denke, Sie sollten versuchen, machen einige änderungen in Sie css
    versuchen Sie, diese 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);
}

    ich lieber nicht zu verwenden em für die element-Abmessungen, die es sein sollte in px, die Sie verwenden können, em Feind schriftart, - Größe etc.

    InformationsquelleAutor Hemant_Negi

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

    InformationsquelleAutor shammelburg

  4. 0

    Wenn Ihr problem mit Filter (nicht verwandelt), die Probleme verursacht, dann funktioniert das.

    Hatte ich eine filter-setup auf die festen Elemente Eltern, aber es änderte sich mit der Breite des Fensters. Ich bemerkte, dass das Fenster Breite überquerte diese @media (max-width...) Grenzen der fixed-position-element verlagern würde, um genau die position, die es sein sollte, war im egal, was der filter hatte.

    orginal-code:

    <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>

    arbeiten code:

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

    fügen Sie einfach genug Zeit für die festen position zu halten, und erst danach den filter anwenden/transformieren....

    InformationsquelleAutor user3338098

Schreibe einen Kommentar