IE 6 frente a posición: fijo

posición: solucionado que no funciona para Internet Explorer 6. Realmente no puedo entender las soluciones encontradas en google. Necesito que funcione en IE6, IE7, IE8 & FireFox 3.0.IE 6 frente a posición: fijo

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

Fuente

2009-07-02 Cudos

No apoyar IE6! Cuanto antes las personas dejen de piratear sitios para IE6, menos tracción tendrá y más rápido morirá. O bien, agregue este código después de su primer bloque de estilo;

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

El resultado no es muy suave, pero funciona.

ACTUALIZACIÓN

que no estaba muy clara sobre cómo debe ser utilizado; simplemente agregue el ID (o clase) de cualquier elemento que tenga "posición: fija" a la lista de declaraciones al comienzo del bloque anterior y ellos se comportarán en IE6.

Fuente

2009-07-02 13:55:16 Mathew

¡Funciona bastante bien! Pero, ¿y si tengo un encabezado? ¿Se puede modificar para ir a la cima cuando se ha pasado el encabezado? – Cudos

"No es compatible con IE6" es fácil de decir (lo digo a menudo), pero a veces simplemente no tiene la opción. – mbillard

Un encabezado debería funcionar bien, ya que este código simplemente corrige la posición: arreglado para IE6 en lugar de interferir con su diseño de otra manera. Sin embargo, es un hack, por lo que puede encontrar situaciones en las que se rompe; realmente dependerá de su diseño final. – Mathew

sí IE6 sucks. aquí está el truco ...

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

que básicamente dice IE6 para mantenerlo absolutamente posicionado en la parte superior izquierda, incluso a medida que se desplaza. esto debería ir por debajo del resto de su CSS para el elemento por lo que lo sobrepasa en IE6.

aquí es para su barra de la izquierda ...

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

Fuente

2009-07-02 13:55:11

me olvidó mencionar im usando el hack subrayado para IE6 en dicho código. –

que subrayó el truco funcionó para IE9 sin embargo, gracias hombre – Chetan

Encontrado esta solución que pellizqué (básicamente las líneas que cambió fue: $ ('# 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'); 
     } 
    } 
}

Se nerviosismo y se ve mal, pero funciona en todos los navegadores, incluido IE6.

Fuente

2009-07-03 13:55:22 Cudos

¡Prefiero el método css, aunque implica expresiones que están PROHIBIDAS! en CSS vis a vis rendimiento. –

Hace poco escribí un plugin jQuery para obtener posición: trabajo fijo en IE 6+. Se no se fluctuación de desplazamiento, se analiza la capacidad (no agente de usuario), que funciona en Internet Explorer 6, 7, 8.

Si utiliza el modo estricto en IE7 + position: fixed será honrado, pero de forma predeterminada IE7 + funciona en el modo Quirks. Este complemento comprueba la capacidad del navegador y, si no respeta la posición: fijo, implementa la corrección jQuery.

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

Algo como esto puede funcionar para usted:

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

Es posible que tenga que hacer algunos ajustes menores CSS para conseguir que funcione para su código. Estoy trabajando en valores de "compensación" como opciones mientras hablamos.

Fuente

2010-01-10 02:10:38

Acabo de probar esto en la versión IETester de IE6 y funcionó muy bien y ... No Jitter, Whoo!

Supongamos que tiene un elemento con una clase de cuadro, por ejemplo ...

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

Vuelva a colocar la etiqueta de apertura <HTML> con declaraciones condicionales de IE ...

 <html> 

Luego, como MatW & mitchbryson sugirió usar 'expresión' para simular la posición fija.

Nota: Este código va después de los estilos del elemento original en el 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'); 
}

El problema es que en cualquier desplazamiento del elemento de página se jitter, esta es una manera de compensar ...

Nota: Este código va en la parte superior de tu CSS o después de su labrado 'HTML {}' en tu CSS.

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

Según Thomas Aylott @ SubtleGradient.com,

" ... Fuerza al procesamiento de la CSS antes de que se vuelve a dibujar la página. Ya que está procesando el css de nuevo antes de volver a dibujar, que va a seguir adelante y tratar sus expresiones CSS antes de volver a dibujar demasiado Esto le da elementos de posición fija perfectamente lisas ""

artículo enlace:.! http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

Por ejemplo, todos juntos ...

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

Fuente

2012-05-12 16:19:17 Terry

Tuve una gran inestabilidad y esto lo solucionó. +1 –

Respuesta

Cuestiones relacionadas