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.
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);
//}
}