2009-08-25 9 views
0

Ich habe eine Seite mit einem schwebenden Balken erstellt. Das Problem ist, dass, wenn ich die Bildlaufleiste auf der rechten Seite verschiebe, die schwebende untere Leiste ruckartig bewegt wird, obwohl sie schließlich unten ist.Schwimmende Bodenleiste ruckelt beim Verschieben

Ich habe versucht, die ruckartige Bewegung zu beheben, indem Sie entweder das Hintergrundkörperbild entfernen oder die overflow:auto für container-msg entfernen. Es funktioniert, aber ich muss diese haben. Was kann ich tun, um diese Bewegung reibungslos zu machen?

Die HTML ist:

<body style="background:#cfe1ed url(bg.jpg) repeat-x fixed;margin: 0;padding: 0;text-align: center;color: #404040;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;"> 
<div id="container-msg" style="width: 900px;min-height: 500px;border: 0;overflow:auto;text-align: left;margin: 0 auto 0 auto;background:#FFF;"> 
    <p>h</p> 
    <p>dfh</p> 
    <p>h</p> 
    <p>fg</p> 
    <p>hf</p> 
    <p>h</p> 
    <p>g</p> 
    <p>dfg</p> 
    <p>dfh</p> 
    <p>fg</p> 
    <p>hfg</p> 
    <p>h</p> 
    <p>fgh</p> 
    <p>fgh</p> 
    <p>gfh</p> 
    <p>fh</p> 
    <p>dg</p> 
    <p>h</p> 
    <p>dfh</p> 
    <p>h</p> 
    <p>fg</p> 
    <p>hf</p> 
    <p>h</p> 
    <p>g</p> 
    <p>dfg</p> 
    <p>dfh</p> 
    <p>fg</p> 
    <p>hfg</p> 
    <p>h</p> 
    <p>fgh</p> 
    <p>fgh</p> 
    <p>gfh</p> 
    <p>fh</p> 
    <p>dg</p> 
    <p>h</p> 
    <p>dfh</p> 
    <p>h</p> 
    <p>fg</p> 
    <p>hf</p> 
    <p>h</p> 
    <p>fghf</p> 
    <p>h</p> 
</div> 
<div id="music" style=" background:#CCC;display:block;position:fixed;height:35px;width:500px;bottom:0px;margin-left:auto;margin-right:auto; 
"> 
</div> 

</body> 
+0

BTW, testete ich mit Firefox 3.x aber IE8 funktioniert ohne Ruckeln fein –

+0

ff 3.5.2 - ruckelt. Hast du den z-index ausprobiert? – lfx

+0

Manche Leute sehen die ruckartige, langsame Bewegung der unteren Leiste auch nicht. Das ist merkwürdig. Könnte wegen Grafikkarte sein? –

Antwort

0

Es scheint völlig in Ordnung zu arbeiten. Stellen Sie jedoch sicher, dass Sie eine VALID doctype else-Position hinzufügen: fixed funktioniert NICHT in IE7. Für IE6 müssen Sie einen kleinen Javascript-Code schreiben, um ihn jedes Mal nach unten zu verschieben.

+0

Haben Sie es in Firefox 3.x versucht? Bewegen Sie die Bildlaufleiste schnell und achten Sie darauf, wo die "schwarzen Zeichen" die untere Leiste berühren. Scheint, dass das Aktualisieren/Rendern nicht glatt war. –

+0

3.0.13 funktioniert perfekt –

Verwandte Themen