IE posición 6 vs.: fijada
https://stackoverflow.com/questions/1074335
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Posición: fijo que no funciona para Internet Explorer 6. Realmente no puedo entender las correcciones se encuentran en Google. Lo necesito para trabajar en IE6, IE7, IE8 y 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>
Solución
No apoyar IE6! Más pronto la gente se detienen piratería sitios alrededor para IE6, al menos tracción que tendrá y más rápido se va a morir! O añadir 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.
Actualizar
Yo no estaba muy clara sobre cómo debe ser utilizado; sólo tiene que añadir el ID (o clase) de cualquier elemento que tienen "position: fixed". a la lista de declaración al comienzo del bloque de arriba y van a comportarse en IE6
Otros consejos
Sí IE6 chupa. 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 debe pasar por el resto de su CSS para el elemento por lo que el exceso de lo monta 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');
}
Acabo de probar esto en la versión de IETester de IE6 y funcionó muy bien y ... No Jitter, Whoo!
Digamos que usted 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 ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
y
<!--[if !IE]--> <html> <!--[endif]-->
A continuación, como MATW & mitchbryson sugerido el uso 'expresión' para simular la posición fija.
Nota:. Este código va después de 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 página desplazarse el elemento va a fluctuar, esta es una manera de compensar ...
Nota: Este código va en la parte superior de tu CSS o después de su 'HTML {}' en su estilo CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
De acuerdo con Thomas Aylott @ SubtleGradient.com, España
" ... Esto obliga a la tramitación de la CSS antes de que la página se vuelve a dibujar. Puesto que es el procesamiento de la CSS de nuevo antes de volver a dibujar, que va a seguir adelante y tratar sus expresiones CSS antes de volver a dibujar también. Esto le da a la perfección posición lisa elementos arreglado! ""
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>
Encontrados 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 *
* - 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');
}
}
}
nerviosismo y se ve mal, pero el trabajo en todos los navegadores, incluyendo IE6.
Hace poco escribí un plugin de jQuery para obtener position: fixed funciona en IE 6+. Es no fluctuación de desplazamiento, se analiza la capacidad (no agente de usuario), funciona en Internet Explorer 6, 7, 8.
Si utiliza el modo estricto en la posición IE7 +: fijo será honrado, pero por defecto, IE7 + opera en el modo no estándar. Este plugin comprueba la capacidad del navegador, y si no respeta la posición:. Fijo, entonces se implementa la solució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 "offset" valores como opciones en estos momentos.
Es posible hacerlo con la expresión CSS, pero con algún artilugio extra para conseguir un desplazamiento suave:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}
