Home>Web design tutorial>WEB standardization

Let’s talk about the Fixed positioning of IE6 again

Author：Eve Cole Update Time：2010-11-12 15:43:53

It is well known that the IE6 browser, which was produced in 2002 and is currently the mainstream in my country, does not support the static positioning attribute fixed of CSS2. For this reason, the troubled front-end engineers have invented various solutions:

1. Conventional js solution

This is the oldest and widely used. For example, many couplet advertisements that follow the scroll bar use this solution. The disadvantage is that the dragging scroll bar element shakes very badly. Although it can be improved through smoothing, the effect is still not ideal. But what I want to say is that although the visual effect of this solution is a little worse, the stability is nothing to say.

2. Use HTML structure and layout simulation method

This solution was once used by 163 Blog. 163 puts all the content in a container with a height of 100% and the scroll bar set to automatic, and then sets an absolutely positioned layer below it, so that the absolutely positioned layer can reach a static state. . Principle: The scroll bar you drag is not the entire page you drag, but the container that simulates the entire page, so the areas outside the container are "stationary". detailed:

The following is the quoted content:

<!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 ">
<head>
<style>
*{margin:0}
body{
height:1000px;
width:1000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script>
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 = '';
}
}else{
a.style.position = 'fixed';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html>

The visual effect here is perfect, but there are three problems:

1. The HTML structure needs to be changed (this item will not be explained)

2. Destroys the user experience: I have tried this method before, but the scroll bar will not stay in place when I refresh the page, which I cannot tolerate.

3. Destroy some js events, such as cloudgamer mentioned that it will destroy the scroll event of the window. Here, at least N many encapsulated js components can be invalidated.

3. The unprecedented "clearing method" solution using the Mars method

The principle is so bizarre that I can't explain it, and the application is too limited. For examples see:

The following is the quoted content:

<!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 ">
<head>
<style>
*{margin:0}
body{
height:1000px;
width:1000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script>
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 = '';
}
}else{
a.style.position = 'fixed';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html>

4. Expression plus fixed background solution for new use of old technology

This solution can visually achieve static positioning perfectly. example:

cloudgamer: AlertBox pop-up layer (information prompt box) effect

My previous: "Simple full-screen transparent mask (lightBox) solution"

Related Articles