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

Vamos falar sobre o posicionamento fixo do IE6

Autor：Eve Cole Data da Última Atualização：2025-02-07 13:44:23

O navegador IE6, que foi amplamente produzido em 2002 e atualmente é o mainstream em meu país, não suporta o atributo de posicionamento fixo do CSS2.

1. A solução para JS regular

Este é o mais antigo e amplamente utilizado. A desvantagem é que os elementos da barra de rolagem de arrasto estão com muita força. No entanto, é importante dizer que, embora essa solução tenha um pouco de efeito visual ruim, a estabilidade não deve ser mencionada.

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

Esta solução já foi aplicada por 163 blog. estado . Princípio: a barra de rolagem que você arrasta não é a página inteira, mas o contêiner que simula a página inteira, portanto o local fora do contêiner é "ainda". detalhado:

A seguir, o conteúdo citado:

<!
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<estilo>
*{margem: 0}
corpo{
Altura: 1000px;
Largura: 1000px;
}
#um{
Largura: 300px;
Altura: 100px;
Antecedentes: vermelho;
}
</style>
<Cript>
var isie6 = window.xmlHttPrequest? False: true;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
if (isie6) {
a.style.Position = 'Absolute';

window.onscroll = function () {
d.innerhtml = '';
}
}outro{
a.style.Position = 'fixo';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<Body>
<div id = "d" style = "display: nenhum;"> </div>
<div id = 'a'> teste </div>
</body>
</html>

Aqui o efeito visual é perfeito, há três problemas:

1. Precisa alterar a estrutura HTML (este item não é explicado)

2. Destrua a experiência do usuário: já tentei esse método antes, mas quando refresco a página, a barra de rolagem não ficará onde está, o que não posso tolerar.

3. Destrua alguns eventos de JS.

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

O princípio é realmente bizarro, não posso explicar e as limitações de aplicativos são muito grandes. Veja exemplos:

A seguir, o conteúdo citado:

<!
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<estilo>
*{margem: 0}
corpo{
Altura: 1000px;
Largura: 1000px;
}
#um{
Largura: 300px;
Altura: 100px;
Antecedentes: vermelho;
}
</style>
<Cript>
var isie6 = window.xmlHttPrequest? False: true;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
if (isie6) {
a.style.Position = 'Absolute';

window.onscroll = function () {
d.innerhtml = '';
}
}outro{
a.style.Position = 'fixo';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<Body>
<div id = "d" style = "display: nenhum;"> </div>
<div id = 'a'> teste </div>
</body>
</html>

4. Expressão recém -usada e solução de fundo fixo para tecnologia antiga

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

CloudGamer: AlertBox Pop-up Camada (caixa de prompt de informações) Efeito

Meu anterior: "Solução simples de máscara transparente de tela inteira (Lightbox)"

Artigos Relacionados