IE posizione 6 vs.: fisso
https://stackoverflow.com/questions/1074335
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
position: fixed che non funziona per Internet Explorer 6. Non riesco a capire realmente le correzioni trovati su google. Ho bisogno di lavorare in IE6, IE7, IE8 e Firefox 3.0.
<!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>
Soluzione
Non supportare IE6! Le persone si fermano Sooner siti circa per IE6 hacking, il meno trazione avrà e più rapidamente morirà! O, aggiungere 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.
Aggiorna
Non ero troppo chiaro su come questo dovrebbe essere usato; è sufficiente aggiungere l'id (o classe) di tutti gli elementi che hanno "position: fixed". all'elenco dichiarazione all'inizio del blocco di cui sopra e loro stessi si comporteranno in IE6
Altri suggerimenti
Si IE6 fa schifo. ecco il mod ...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
che, in fondo dice IE6 per mantenere assolutamente posizionato in alto a sinistra proprio mentre scorre. questo dovrebbe andare sotto il resto della tua CSS per l'elemento in modo che over-corse 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');
}
Ho appena testato questo su versione IETester di IE6 e ha funzionato grande e ... No Jitter, Whoo!
Diciamo che avete un elemento con una classe di scatola per esempio ...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Sostituire il tag di apertura <HTML> con istruzioni condizionali di IE ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
e
<!--[if !IE]--> <html> <!--[endif]-->
Poi, come MATW e mitchbryson ha suggerito l'uso 'l'espressione' per simulare posizione fissa.
Nota:. Questo codice va dopo gli stili dell'elemento originale del 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 stile 'HTML {}' nel CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
Secondo Thomas Aylott @ SubtleGradient.com,
" ... Questo costringe il trattamento dei CSS prima che la pagina viene ridisegnato. Dal momento che è l'elaborazione di nuovo il css prima di ridisegnare, che andrà avanti ed elaborare le vostre espressioni CSS prima di ridisegnare anche. Questo ti dà perfettamente posizione liscia elementi fissi! ""
Link articolo: http://subtlegradient.com/articles/2009/07/29/ css_position_fixed_for_ie6.html
Ad 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>
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 *
* - 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');
}
}
}
nervosismi e sembra male, ma il lavoro su tutti i browser tra cui IE6.
Recentemente ho scritto un plugin jQuery per ottenere position: fixed lavora in IE 6+. E ' non jitter sul rotolo, esamina la capacità (non user-agent), funziona in Internet Explorer 6, 7, 8.
Se si utilizza la modalità rigorosa in IE7 posizione +: fissa sarà onorato, ma di default IE7 + funziona in quirks mode. Questo plugin verifica la presenza di funzionalità di browser, e se non onora posizione:. Fisso, quindi 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 a "compensare" valori come opzioni mentre parliamo.
E 'possibile farlo con l'espressione CSS, ma con qualche trucco in più per ottenere uno scorrimento uniforme:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}
