The depressing 1px-IE6 is definitely a magic bug.

 

YesterdayBorder rounded cornerA bug was found.

This bug actually exists in IE 6 or earlier versions.

 

The cause is:

1. The outer element is located using position: relative, and the actual content width/height is odd;

2. The inner layer uses position: absolute to locate and uses bottom/Right to locate.

 

Let's take a closer look at the differences between the following two situations (This bug does not occur in other browsers to use browsers earlier than IE6.):

(1)

19px
38px
57px

Magic 1px

(2)

19px
38px

Magic 1px

 

This is usedCode:

Code
< Style Type = "Text/CSS" >
. Wrapper {
Position : Relative ;
Width : 201px ;
Line-height : 19px ;  
Background : #000 ;  
Color : # Fff ;
}
. OBJ {
Position : Absolute ;  
Right : 0px ;  
Bottom : 0px ;  
Border : 1px solid # f00 ;
}
</ Style >

(1)
< Div Class = "Wrapper" >
19px < BR > 38px < BR > 57px
< Div Class = "OBJ" > Magic 1px </ Div >
</ Div >
(2)
< Div Class = "Wrapper" >
19px < BR > 38px
< Div Class = "OBJ" > Magic 1px </ Div >
</ Div >

You may find that, in (2), the inner Div can locate the bottom of the parent element according to the expected bottom. The position of bottom: 1px is displayed in (1.

This is the so-called magic 1px.

The difference is that (1) the height of the parent element is 19*3 = 57px, and (2) the height of the parent element in (2) is 19*2 = 38px, the difference between an odd number and an even number.

 

Let's construct the following example:

(3)

Magic 1px

(4)

Magic 1px

 

Code:

Code
< Style Type = "Text/CSS" >
. OBJ {
Position : Absolute ;  
Right : 0px ;  
Bottom : 0px ;  
Border : 1px solid # f00 ;
}
. Wrapper1 {
Position : Relative ;
Width : 100px ;
Height : 100px ;
Background : #000 ;  
Color : # Fff ;
}
. Wrapper2 {
Position : Relative ;
Width : 101px ;
Height : 101px ;
Background : #000 ;  
Color : # Fff ;
}
</ Style >

(3)
< Div Class = "Wrapper1" >
< Div Class = "OBJ" > Magic 1px </ Div >
</ Div >
(4)
< Div Class = "Wrapper2" >
< Div Class = "OBJ" > Magic 1px </ Div >
</ Div >

 

As you can see clearly, bottom and right positioning in (4) both have similar problems, but not in (3. The difference between (3) and (4) lies in the parity difference between width and height.

That is to say, when the outer content height or width (tested padding has no effect on this) is an odd number, the absolute position of bottom and right will see a + 1px deviation.