Home>Web design tutorial>WEB standardization

Let’s talk about the Fixed positioning of IE6

Author：Eve Cole Update Time：2025-02-06 17:32:26

The IE6 browser, which was widely produced in 2002 and is currently the mainstream in my country, does not support the fixed positioning attribute of CSS2. The painful front-end engineers have invented various forms of solutions for this:

1. The solution to regular js

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 elements are jittering very hard. Although it can be improved through smoothing, the effect is still not ideal. However, it is important to say that although this solution has a little poor visual effect, the stability is not to be mentioned.

2. Use HTML structure and layout simulation method

This solution was once applied by 163 blog. 163 puts all the content in a container with a height of 100% and the scroll bar is set to automatic, and then sets an absolute positioning layer below so that this absolute positioning layer can reach a static state . Principle: The scrollbar you drag is not the entire page, but the container that simulates the entire page, so the place outside the container is "still". 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>


Here the visual effect is perfect, there are three problems:

1. Need to change the HTML structure (this item is not explained)

2. Destroy the user experience: I have tried this method before, but when I refresh the page, the scroll bar will not stay where it is, which I cannot tolerate.

3. Destroy some events of JS. For example, cloudgamer mentioned that it will destroy the scroll event of Windows. Here, at least N many encapsulated js components can be invalidated.

3. The unprecedented "clearing method" solution to Mars method

The principle is really bizarre, I can't explain it, and the application limitations are too great. See examples:


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. Newly used expression and fixed background solution for old technology

This solution can visually perfectly realize static positioning. example:

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

My previous: "Simple Full Screen Transparent Mask (lightBox) Solution"

Related Articles