Dh 6 vs. Position: behoben

https://stackoverflow.com/questions/1074335

21-08-2019
|

Frage

Position: Behoben, das für Internet Explorer 6 nicht funktioniert. Ich kann die bei Google gefundenen Korrekturen nicht wirklich verstehen. Ich brauche es, um in IE6, IE7, IE8 & Firefox 3.0 zu arbeiten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Sidebar fixed</title>
    <style type="text/css">
    #wrapper {
        position:relative;
        width:900px;
        margin:0 auto 0 auto;
    }
    #sidebar_left {
        position:fixed;
        height:200px;
        width:200px;
        border:1px solid #000;
    }
    #sidebar_right {
        position:fixed;
        height:200px;
        width:200px;
        margin-left:700px;
        border:1px solid #000;
    }
    #content {
        position:absolute;
        height:2000px;
        width:480px;
        margin-left:210px;
        border:1px solid #000;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="sidebar_left">
            <p>Left sidebar</p>
        </div>
        <div id="sidebar_right">
            <p>Right sidebar</p>
        </div>
        <div id="content">
            <p>This is the content</p>
        </div>
    </div>
</body>
</html>

Lösung

Unterstütze IE6 nicht! Je früher die Leute aufhören, Websites für IE6 zu hacken, desto weniger Traktion wird es haben und desto schneller wird es sterben! Oder fügen Sie diesen Code nach Ihrem ersten Stilblock hinzu.

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->

Das Ergebnis ist nicht supergleit, aber es funktioniert.

AKTUALISIEREN

Ich war mir nicht allzu klar, wie dies verwendet werden sollte. Fügen Sie einfach die ID (oder Klasse) von Elementen hinzu, die zu Beginn des obigen Blocks "Position: Fixed" zur Deklarationsliste haben, und sie werden sich in IE6 verhalten.

Andere Tipps

Ja, IE6 saugt. Hier ist der Hack ...

_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

Das sagt im Grunde genommen IE6, dass es absolut oben links positioniert bleibt, auch wenn es scrolls. Dies sollte unter dem Rest Ihres CSS für das Element gehen, damit es es in IE6 überträgt.

Hier ist es für deine linke Bar ...

#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

Ich habe dies gerade auf Ietesters Version von IE6 getestet und es hat großartig und ... kein Jitter, whoo!

Nehmen wir an, Sie haben zum Beispiel ein Element mit einer Kastenklasse ...

.box {
    position: fixed;
    top: 0px;
    left: 0px;
}

Ersetzen Sie die Öffnung <HTML> Tag mit bedingten IE -Aussagen ...

und

 <html> 

Dann wie Matw & Mitchbryson Vorgeschlagene verwenden Sie "Ausdruck", um die feste Position fest zu simulieren.

Hinweis: Dieser Code verfolgt den Stilen des Originalelements im CSS.

#ie6 .box { 
    position: absolute;
    top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
    left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

Das Problem ist, dass das Element auf jeder Seite, die das Element entspricht, eine Möglichkeit ist, ...

HINWEIS: Dieser Code geht ganz oben auf Ihrem CSS oder nach Ihrem gestalteten HTML {} 'in Ihrem CSS.

#ie6 {
    background-image:url(about:blank);
    background-attachment:fixed;
}

Entsprechend Thomas Aylott @ Subtilegradient.com,

"... Dies zwingt die Verarbeitung des CSS, bevor die Seite neu gezeichnet wird. Da es das CSS erneut verarbeitet, bevor sie neu gezogen werden, wird es Ihre CSS -Ausdrücke verarbeiten, bevor Sie auch neu gezogen werden. Dies gibt Ihnen die festen Position mit festen Position!" "

Artikel Link: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

Zum Beispiel alle zusammen ...

<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->

<HEAD>
<STYLE>

#ie6 {
   background-image:url(about:blank);
   background-attachment:fixed;
}
.box {
   position: fixed;
   top: 0px;
   left: 0px;
}
#ie6 .box { 
   position: absolute;
   top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
   left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

</STYLE>
</HEAD>

<BODY>
    <div class="box"></div>
</BODY>

</HTML>

Fand diese Lösung, die ich optimierte (im Grunde die Zeilen, die ich geändert habe, war: $ ('#Sidebar_Left'). CSS ('Top', document.documentElement.scrolltop);):

// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0

/********************************
*   (C) 2009 - Thiago Barbedo   *
*   - tbarbedo@gmail.com        *
*********************************/
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
            $('#sidebar_left').css('top',document.documentElement.scrollTop);
            $('#sidebar_right').css('top',document.documentElement.scrollTop);
        } else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
            $('#sidebar_left').css('top','299px');
            $('#sidebar_right').css('top','299px');
        }
    }
}

Es macht und sieht schlecht aus, aber arbeitet an allen Browsern, einschließlich IE6.

Ich habe kürzlich ein JQuery -Plugin geschrieben, um Position zu erhalten: Fixes Arbeiten in IE 6+. Es nicht Jitter auf Scroll, es wird in der Fähigkeit (nicht mit Benutzeragent) befasst, arbeitet in Internet Explorer 6, 7, 8.

Wenn Sie den strengen Modus in IE7+ Position verwenden: Behoben wird geehrt, wird jedoch standardmäßig IE7+ im Quirks -Modus arbeitet. Dieses Plugin prüft die Browser -Funktion, und wenn es keine Position achtet: behoben, implementiert es die JQuery -Fix.

http://code.google.com/p/fixedposition/

So etwas kann für Sie funktionieren:

$(document).ready(function(){
   $("#chatForm").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

Möglicherweise müssen Sie einige kleinere CSS -Anpassungen vornehmen, damit es für Ihren Code funktioniert. Ich arbeite an "Offset" -Werten als Optionen, während wir sprechen.

Es ist möglich, dies mit CSS -Ausdruck zu tun, aber mit einem zusätzlichen Hack, um ein reibungsloses Scrollen zu erhalten:

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow