Más
Descarga de código fuente Programación relacionada Recursos para crear sitios web Libros y tutoriales Juegos móviles Software móvil Artículo
Inicio>Tutorial de diseño web>estandarización WEB

Hablemos nuevamente del posicionamiento fijo de IE6.

Autor：Eve Cole Fecha de actualización：2010-10-12 18:13:26

Es bien sabido que el navegador IE6, que se produjo en 2002 y actualmente es el principal en mi país, no admite el atributo de posicionamiento estático fijo de CSS2. Por esta razón, los ingenieros de front-end con problemas han inventado varias soluciones:

1. Solución js convencional

Esta es la más antigua y la más utilizada. Por ejemplo, muchos anuncios pareados que siguen a la barra de desplazamiento utilizan esta solución. La desventaja es que el elemento de la barra de desplazamiento que se arrastra se mueve mucho. Aunque se puede mejorar mediante el suavizado, el efecto aún no es ideal. Pero lo que quiero decir es que aunque el efecto visual de esta solución es un poco peor, la estabilidad no es nada que decir.

2. Utilice la estructura HTML y el método de simulación de diseño.

Esta solución fue utilizada una vez por 163 Blog 163 coloca todo el contenido en un contenedor con una altura del 100% y la barra de desplazamiento configurada en automática, y luego establece una capa absolutamente posicionada debajo de él, de modo que la capa absolutamente posicionada pueda alcanzar una. estado estático. Principio: la barra de desplazamiento que arrastra no es la página completa que arrastra, sino el contenedor que simula la página completa, por lo que las áreas fuera del contenedor son "estacionarias". detallado:

El siguiente es el contenido citado:

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">


*{margen:0}
cuerpo{
altura: 1000 px;
ancho: 1000px;
}
#a{
ancho: 300 px;
altura: 100 px;
fondo: rojo;
}


var isie6 = ventana.XMLHttpRequest?false:true;
ventana.onload = función(){
var a = document.getElementById('a');
var d = document.getElementById('d');
si(isie6){
a.style.position = 'absoluta';

ventana.onscroll = función(){
d.innerHTML = '';
}
}demás{
a.style.position = 'fijo';
}
a.estilo.derecho = '0';
a.estilo.bottom = '0';
}




prueba


El efecto visual aquí es perfecto, pero hay tres problemas:

1. Es necesario cambiar la estructura HTML (este elemento no se explicará)

2. Destruye la experiencia del usuario: he probado este método antes, pero la barra de desplazamiento no permanece en su lugar cuando actualizo la página, lo cual no puedo tolerar.

3. Destruya algunos eventos js, como Cloudgamer mencionó que destruirá el evento de desplazamiento de la ventana. Aquí, se pueden invalidar al menos N muchos componentes js encapsulados.

3. La solución sin precedentes del "método de limpieza" utilizando el método de Marte

El principio es tan extraño que no puedo explicarlo y la aplicación es demasiado limitada. Para ejemplos ver:

El siguiente es el contenido citado:

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">


*{margen:0}
cuerpo{
altura: 1000 px;
ancho: 1000px;
}
#a{
ancho: 300 px;
altura: 100 px;
fondo: rojo;
}


var isie6 = ventana.XMLHttpRequest?false:true;
ventana.onload = función(){
var a = document.getElementById('a');
var d = document.getElementById('d');
si(isie6){
a.style.position = 'absoluta';

ventana.onscroll = función(){
d.innerHTML = '';
}
}demás{
a.style.position = 'fijo';
}
a.estilo.derecho = '0';
a.estilo.bottom = '0';
}




prueba


4. Solución Expression plus de fondo fijo para un nuevo uso de tecnología antigua

Esta solución puede lograr visualmente un posicionamiento estático perfectamente. ejemplo:

cloudgamer: Efecto de capa emergente AlertBox (cuadro de solicitud de información)

Mi anterior: "Solución simple de máscara transparente (lightBox) de pantalla completa"