IE 6 vs. posizione: fisso

posizione: corretto che non funziona per Internet Explorer 6. Non riesco proprio a capire le correzioni trovate su google. Ho bisogno che funzioni in IE6, IE7, IE8 & FireFox 3.0.IE 6 vs. posizione: fisso

<!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>

fonte

2009-07-02 Cudos

Non supportare IE6! Prima la gente smette di hackerare siti per IE6, meno trazione avrà e più velocemente morirà! Oppure aggiungi questo codice dopo il primo blocco di stile;

<!--[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]-->

Il risultato non è super liscio, ma funziona.

UPDATE

non ero troppo chiare su come questo dovrebbe essere usato; semplicemente aggiungi l'id (o classe) di tutti gli elementi che hanno "position: fixed" alla lista di dichiarazione all'inizio del blocco precedente e si comportano da soli in IE6.

fonte

2009-07-02 13:55:16 Mathew

Funziona piuttosto bene! Ma cosa succede se ho un colpo di testa? Può essere modificato per andare in cima quando l'intestazione è stata passata? – Cudos

"Non supportare IE6" è facile da dire (lo dico spesso), ma a volte non hai scelta. – mbillard

Un'intestazione dovrebbe funzionare bene, in quanto questo codice si limita a correggere la posizione: corretto per IE6 piuttosto che confondere il layout in un altro modo. È un trucco, quindi puoi trovare situazioni in cui si rompe; dipenderà davvero dal tuo layout finale. – Mathew

sì IE6 fa schifo. ecco il mod ...

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

che dice in sostanza IE6 per mantenere assolutamente posizionato in alto a sinistra proprio mentre scorre. questo dovrebbe andare sotto il resto del tuo css per l'elemento in modo da ridurlo in IE6.

qui è per la vostra barra di sinistra ...

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

fonte

2009-07-02 13:55:11

Ho dimenticato di dire im utilizzando l'hack di sottolineatura per IE6 in quel codice. –

che sottolineatura hack ha funzionato per IE9 però, grazie uomo – Chetan

trovato questa soluzione, che ho ottimizzato (in pratica le linee che ho cambiato è stato: $ ('# 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 * 
* - [email protected]  * 
*********************************/ 
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'); 
     } 
    } 
}

E Jitters e sembra male, ma funziona su tutti i browser incluso IE6.

fonte

2009-07-03 13:55:22 Cudos

Preferisco il metodo css, anche se implica espressioni che sono VIETATE! in CSS vis a vis performance. –

Ho recentemente scritto un plugin jQuery per ottenere la posizione: risolto il lavoro in IE 6+. Si non si jitter sul rotolo, esamina la capacità (non user-agent), lavora a Internet Explorer 6, 7, 8.

Se si utilizza la modalità rigorosa in IE7 + position: fixed sarà onorato, ma per impostazione predefinita, IE7 + opera in modalità Quirks. Questo plugin controlla la capacità del browser e, se non rispetta la posizione: risolto, implementa la correzione jQuery.

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

Qualcosa di simile può funzionare per voi:

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

potrebbe essere necessario apportare alcune modifiche minori CSS per farlo funzionare per il vostro codice. Sto lavorando sui valori "offset" come opzioni mentre parliamo.

fonte

2010-01-10 02:10:38

Ho appena provato questo nella versione IE di IE6 e ha funzionato benissimo e ... No Jitter, Whoo!

Diciamo che si dispone di un elemento con una classe di box per esempio ...

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

Sostituire il tag di apertura <HTML> con istruzioni condizionali di IE ...

 <html> 

Quindi come MatW & mitchbryson suggerito usare 'espressione' per simulare la posizione corretta.

Nota: questo codice segue gli stili dell'elemento originale nel 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'); 
}

Il problema è che in qualsiasi pagina, scorrere l'elemento sarà jitter, questo è un modo per compensare ...

Nota: Questo codice va in alto il vostro CSS o dopo il vostro Styled "HTML {}" nel tuo CSS.

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

Secondo Thomas Aylott @ SubtleGradient.com,

" ... In questo modo l'elaborazione del CSS prima che la pagina viene ridisegnato. Dal momento che è l'elaborazione di nuovo il css prima di ridisegnare, si andrà avanti ed elaborare le vostre espressioni CSS prima di ridisegnare anche questo ti dà posizione fissa elementi perfettamente lisce ""

collegamento dell'articolo:.! http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

Per esempio, tutti insieme ...

<!--[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>

fonte

2012-05-12 16:19:17 Terry

Ho avuto un jitter grave e questo l'ha risolto! +1 –

IE 6 vs. posizione: fisso

risposta

Problemi correlati