2 Stimmen

Wie behalte ich eine Leiste am unteren Rand einer Seite im IE 6,7,8 oder wie zwinge ich den IE, die Oberfläche neu zu zeichnen?

Ich muss eine Leiste an den unteren Rand der Client-Ansicht im Webbrowser kleben. Traditionell würde ich position:fixed verwenden; außer, dass ich meine IE 6-Clients unterstützen müssen. Ich habe einen sehr umfangreichen Hack, um den Balken an den unteren Rand der Seite und über den Inhalt zu kleben, aber wenn der Benutzer nach unten oder rechts scrollt, bleibt der Balken auf der Seite fixiert.

Um dieses Problem zu beheben, verwende ich ein Javascript-Ereignis, das mit setInterval ausgelöst wird. Wenn ich die Funktion in den Debug-Tools des IE (8) ausführe, wird das Ereignis ausgelöst und ändert die Attribute position top und position left, aber die Seite zeichnet das Element nicht neu. Der Code funktioniert, aber das Element bewegt sich nicht, siehe unten.

The example shown.

Nur damit Sie es wissen, der Fix muss im IE-Quirks-Modus funktionieren... er kann nicht funktionieren, wenn die anderen IE-Versionen versuchen, einen Standard zu verwenden. Glauben Sie mir, ich habe es versucht.

P.S. Dies ist wirklich ärgerlich, weil ich doppelt überprüfen IE9 Unterstützung als gut... erhalten diese das Element nicht mit den Bildlaufleisten in IE 6, 7 und 8 bewegen, aber bewegt sich in IE 9 und es zeigt immer noch "IE Quirks Mode". Und Microsoft sagte, dass diese Version keine Auswirkungen hätte,...

HTML-Struktur

<body>
    <div id="j_zoom_area" style="zoom:100%;">
        The Application area the the zoom is changed (by the bar) for accessibility...
    </div>
    <div id="j_protectorite">
        <div class="j_bar">
        <div class="j_plate">Zoom Controls, Help, Search, other misc controls</div>
        <div class="j_plate">Copyright info, privacy policy, etc...</div>
        </div>
    </div>
    <script type="text/javascript" language="javascript">
         j_doBar();
    </script>
</body>

Das CSS für die Leiste lautet https://kscserver.com/ERP-API/Style/includes.css . Das besondere Javascript für die Balkenkorrektur.

//This controls the scrolling of the bar
function j_FixBarSlowly(){
var nTop = 0;
var nLeft = 0;

nTop = (document.body.scrollTop + document.body.clientHeight) - 67;
nLeft = document.body.scrollLeft;

//document.title = document.body.scrollTop + '+' + document.body.clientHeight + '-67' + '=' + nTop + 'px';
document.getElementById("j_protectorite").style.Top = nTop + 'px';
document.getElementById("j_protectorite").style.Left = nLeft + 'px';
document.getElementById("j_protectorite").style.Bottom = '';
document.getElementById("j_protectorite").style.Position = 'absolute';

//Ie6,7,8 hack to force redraw

}

function j_doBar() {
//j_FixBarSlowly();

//if (setInterval != undefined) {
//  setTimeout("j_doBar();",5);
//} else {
    setInterval("j_FixBarSlowly();",5);
//}
}

0voto

Spudley Punkte 161296

Ich würde vorschlagen, einen IE-Fix-Hack zu verwenden, z. B. IE7.js von Dean Edwards .

Dieses Skript wird ausgeführt, wenn Ihre Seite im IE geladen wird, und behebt einige häufige Probleme in älteren Versionen des IE. Die Dokumentation listet die Themen auf, mit denen es sich befasst, und enthält position:fixed; .

Ich hoffe, das hilft.

(Die beste Lösung - für Ihren gesunden Menschenverstand - ist natürlich, den Versuch aufzugeben, den IE6 identisch mit neueren Browsern aussehen zu lassen, und einfach mit einer nicht klebenden Fußzeile im IE6 zu leben. Solange es die Benutzerfreundlichkeit nicht beeinträchtigt, sehe ich kein Problem darin, dass IE6-Nutzer ein etwas weniger perfektes Seitenlayout haben. Aber ich weiß, dass einige Leute nicht den Luxus haben, das zu tun; wenn Ihre Benutzer das verlangen, sind sie diejenigen, auf die Sie hören müssen, nicht ich!)

0voto

JustinKaz Punkte 620

Nach weiteren Tests bestand die beste Lösung darin, einen I-Frame für den Seiteninhalt zu verwenden und ein Div am unteren Rand des Seiteninhalts zu platzieren. Natürlich ein paar Javascript Tweaks für die richtige Größe und Sie haben eine perfekte Lösung.

Nur als visuelle Referenz.

alt text

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X