Página Inicial>Tutorial de web design>Normalização WEB

Vamos falar novamente sobre o posicionamento fixo do IE6

Autor：Eve Cole Data da Última Atualização：2010-11-12 15:43:53

É bem sabido que o navegador IE6, produzido em 2002 e atualmente o principal em meu país, não suporta o atributo de posicionamento estático fixo do CSS2. Por esse motivo, os problemáticos engenheiros de front-end inventaram várias soluções:

1. Solução js convencional

Este é o mais antigo e amplamente utilizado. Por exemplo, muitos anúncios em dísticos que seguem a barra de rolagem usam esta solução. A desvantagem é que o elemento da barra de rolagem treme muito. Embora possa ser melhorado por meio de suavização, o efeito ainda não é o ideal. Mas o que quero dizer é que embora o efeito visual desta solução seja um pouco pior, a estabilidade não tem nada a dizer.

2. Use estrutura HTML e método de simulação de layout

Esta solução já foi usada pelo 163 Blog 163 coloca todo o conteúdo em um contêiner com altura de 100% e a barra de rolagem definida como automática, e então define uma camada absolutamente posicionada abaixo dele, para que a camada absolutamente posicionada possa atingir um nível. estado estático. Princípio: A barra de rolagem que você arrasta não é a página inteira que você arrasta, mas o contêiner que simula a página inteira, portanto as áreas fora do contêiner ficam "estacionárias". detalhado:

A seguir está o conteúdo citado:

<!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 ">
<cabeça>
<estilo>
*{margem:0}
corpo{
altura:1000px;
largura:1000px;
}
#um{
largura:300px;
altura:100px;
fundo:vermelho;
}
</estilo>
<roteiro>
var isie6 = window.XMLHttpRequest?false:true;
janela.onload=função(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absoluto';

janela.onscroll=função(){
d.innerHTML = '';
}
}outro{
a.style.position = 'fixo';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<corpo>
<div id="d" style="display:none;"></div>
<div id='a'>teste</div>
</body>
</html>

O efeito visual aqui é perfeito, mas existem três problemas:

1. A estrutura HTML precisa ser alterada (este item não será explicado)

2. Destrói a experiência do usuário: já tentei esse método antes, mas a barra de rolagem não permanece no lugar quando atualizo a página, o que não posso tolerar.

3. Destrua alguns eventos js, como o cloudgamer mencionou que destruirá o evento de rolagem da janela. Aqui, pelo menos N muitos componentes js encapsulados podem ser invalidados.

3. A solução sem precedentes do "método de limpeza" usando o método de Marte

O princípio é tão bizarro que não consigo explicá-lo e a aplicação é muito limitada. Para exemplos, consulte:

A seguir está o conteúdo citado:

<!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 ">
<cabeça>
<estilo>
*{margem:0}
corpo{
altura:1000px;
largura:1000px;
}
#um{
largura:300px;
altura:100px;
fundo:vermelho;
}
</estilo>
<roteiro>
var isie6 = window.XMLHttpRequest?false:true;
janela.onload=função(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absoluto';

janela.onscroll=função(){
d.innerHTML = '';
}
}outro{
a.style.position = 'fixo';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<corpo>
<div id="d" style="display:none;"></div>
<div id='a'>teste</div>
</body>
</html>

4. Expressão mais solução de fundo fixo para novo uso de tecnologia antiga

Esta solução pode alcançar visualmente o posicionamento estático perfeitamente. exemplo:

cloudgamer: efeito da camada pop-up AlertBox (caixa de prompt de informações)

Meu anterior: "Solução simples de máscara transparente em tela cheia (lightBox)"

Artigos Relacionados