css Problem mit "position: fixed" nur in Firefox wegen -moz-transform: Skala(1);

Baue ich eine website und ich möchte den header in einer festen position.

Hab ich schon gemacht, die auf mehrere website, aber es funktioniert nicht auf firefox. Es ist ok, mit safari und Chrome.

Hier ein live-Beispiel (funktioniert nicht nur mit firefox)

Hier ein live-Beispiel, das funktioniert mit firefox

Der einzige Unterschied ist in css :

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

Scheint es, dass -moz-transform "entfernt" die Feste position.

Können Sie mir erklären, warum ?

Ich bin mit -moz-transform:, weil mein Kunde möchte eine zoom-Taste. Ich habe erklärt, dass es keine gute Sache, aber er will immer noch diese Funktionalität.

CSS-code :

#conteneur
{
width: 960px;
position: relative;
margin: auto;
zoom: 100%;
-moz-transform: scale(1); 
-moz-transform-origin: 0 0;
}

#header
{
position:fixed;
top:0;
z-index:3;
width:960px;
height:81px;
background-color:#ccc;
padding-bottom:8px;
}

ps : Du bist herzlich willkommen, wenn Sie wollen, Editiere meinen Beitrag, da Englisch nicht meine 1. Sprache.

  • Versuchen Sie, die Skala von #conteneur zu #conteneur > div
  • Ich bin mir nicht sicher, zu verstehen. Können Sie das konkretisieren ? Aber du hast Recht, wenn ich mich bewege -moz-transform, um den Körper zum Beispiel, der header ist in einer festen position. Ich bin mir nicht sicher, ob das zoom-Ergebnis ist gut auf dem Körper, aber es ' a beginnen. Auch können Sie hier eine Antwort und nicht einen Kommentar, so dass, wenn die Antwort gut ist, kann ich für Sie Stimmen.
InformationsquelleAutor Sébastien Gicquel | 2012-11-20
  1. 3

    Versuchen, die 

    -moz-transform: scale(1); 
-moz-transform-origin: 0 0;

    Teil von #conteneur zu #conteneur > div.

    Also statt:

    #conteneur {
    width: 960px;
    position: relative;
    margin: auto;
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

    versuchen

    #conteneur {
    width: 960px;
    position: relative;
    margin: auto;
}

#conteneur > div {  
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

    Sehen, diese Geige für ein 0.4 Skala Beispiel: http://jsfiddle.net/XtsRH/2/

    Update:

    Über die > (Kind) selector:

    * ist einfach die universal-Selektor, mit den Namen von jedem element-Typ.

    Ich habe gegabelt Ihr fiddle (ändern Sie die Skala mit jQuery): http://jsfiddle.net/AgCSx/ . Der jQuery Selektor geändert von #conteneur zu #conteneur > *

    • Wirklich interessant. Ich habe nie gesehen, diese Art der css-code : #conteneur > * Was bedeutet es ? Auch habe ich bemerkt, dass wenn ich eine zoom-Schaltfläche, und wenn ich Sie ändern den Maßstab mit jquery, wird der header nicht mehr in einer festen position. Sehen Sie diese Geige Beispiel : jsfiddle.net/Vinyl/cxT4m
    • Sorry, der link war falsch. Try this one : jsfiddle.net/Vinyl/bUUNx/1
    • Gicquel: siehe das update für die Antworten
    • Perfekt! Ihre Lösung ist klar. Ich Stimm dir für deine Antwort. Wenn Sie möchten, können Sie auch prüfen, diese Geige und sehen, was ich machen will : jsfiddle.net/Vinyl/RdYNt ich habe ein div und eine Schaltfläche, die in der absoluten position, und ich habe immer noch ein Problem, wenn die zoom-Schaltfläche geklickt wird. Mit Skala mit absoluten und fixen position ist nicht so einfach.
    InformationsquelleAutor Adam
  2. 2

    vor kurzem fand ich ein Kommentar, welcher beschreibt, das gleiche Problem für Behälter mit einer transformation angewendet, d.h. die transformation bricht der festen Effekt. Hier ist ein Auszug aus dem Kommentar...

    "Ein anderer Wert als 'none' für die Transformation der Ergebnisse in der Erstellung eines stacking-context und einem Sie enthaltenden block. Das Objekt fungiert als ein mit block für Fixer Nachkommen." (http://www.w3.org/TR/css3-2d-transforms/)

    Sehen Feste Positionierung in Mobilen Browsern

    InformationsquelleAutor hennson
Schreibe einen Kommentar