Common Browser bugs

First, describe one point:

Page dislocation is not equal to BrowserBUG
,BUG
The correct CSS is set, but the browser does not display it as expected.

For example, if you set an element: margin-left: 10px, but in the browser,

The actually displayed DIV element is: margin-left: 20px;

-- In this case, it is possible that the browserBUG
.

The following are some common browsers:BUG
:

1. Upper and Lower margin OverlaysBug

There are two elements: div1 and div2,Below div1
With a margin of 10 PX,Above div2
With a margin of 10 PX,

The style is as follows:
# Div1 {width: 100px; height: 100px; background: # eee;Margin-bottom: 10px;
}
# Div2 {width: 100px; height: 100px; background: # eee;Margin-top: 10px;
}

The structure is as follows:
<DivId
= "Div1"> div1 </div>
<DivId
= "Div2"> div2 </div>

We originally expected the distance between the two divs to be20px
However, the effect is as follows:

That is to say, there is a 10px space between the two divs.Overlay
Together.
If we increase the margin-bottom of div1 to 15px, the distance between them will be 15px,
There are still 10px space superimposed.

* Solution:
Add two styles to the two divs:Float: left; clear: left;

Final style:
# Div1 {width: 100px; height: 100px; background: # eee; margin-bottom: 10px;Float: left; clear: left;
}
# Div2 {width: 100px; height: 100px; background: # eee; margin-top: 10px;Float: left; clear: left;
}

Finally:

2. IE6 floating margin bilateral distanceBug

Set a parent element box and a child element childbox,

Child-level elements are left floating, and the left margin is also set to 10px:

The style is as follows:

# Box {width: 200px; height: 150px; border: 1px solid # ccc ;}
# Childbox {width: 100px; height: 100px; background: red;

 Float: left; margin-left: 10px;
}

The structure is as follows:

<DivId
= "Box">

<DivId
= "Childbox"> childbox </div>

</Div>

After this setting, it is displayed normally in Firefox, ie7, and ie8, but in ie6, it is displayed as follows:

We clearly only gave the left margin10px !! --
If you change 10px20px
In ie640px !!
In this case, ie6's interpretation of margin-left is to double the original value !!

* Solution:
Add a row style to the child element childbox:Display: inline;

Final style:

# Box {width: 200px; height: 150px; border: 1px solid # ccc ;}
# Childbox {width: 100px; height: 100px; background: red; float: left;Margin-left: 10px;
Display: inline;
}

Finally:

 

3. Under liBug

When li containsAny floating Element
LaterBug
In ie6 and ie7:

The style is as follows:

Ul, p {padding: 0; margin: 0 ;}
Li {list-style: none ;}
/* Clear the default browser style */

Ul {width: 110px ;}
Li {width: 100px; height: 20px; border: 1px solid #333 ;}
P {width: 100px; height: 20px;Float: left;
}

The structure is as follows:

<Ul>
<Li> <p> p </p> </li>
<Li> <p> p </p> </li>
</Ul>

In ie6 and ie7, Mo Ming came up with several more pixels:

Note: I have not set it for liMargin-bottom
.

* Solution:
Add one more style row to li:Float: left;
AndEnsure that li has enough width
Don't let the second line of li actually float up!

Final style:

Ul, p {padding: 0; margin: 0 ;}
Li {list-style: none ;}
/* Clear the default browser style */

Ul {Width: 110px;
}
Li {Width: 100px;
Height: 20px; border: 1px solid #333;Float: left;
}
P {width: 100px; height: 20px; float: left ;}

4. ie6: 1 pixel for absolute positioningBug

Definitely positioning is really a good style. Among the many styles, it is the most cute ^ _ ^. Where do you want it to go, it will go wherever it is, unfortunately, such a good child, I cannot help the Internet Explorer 6 !!

FirstWidth of the parent Element
Set to anyOdd
For example: 350px, letChild-level elements float to the right of parent-level elements:

The style is as follows:

# Box {Width: 155px;
Height: 121px; position: relative; background: red ;}
# Childbox {width: 100px; height: 100px; position: absolute; top: 0;Right: 0;
Background: yellow ;}

The structure is as follows:

<DivId
= "Box">
<DivId
= "Childbox"> </div>
</Div>

As a result, 1px is annoying:

Note that, on the right side, the tiny, but still very dazzling 1pxBug
!!!

If you adjust the position to the bottom right cornerBelow
AndRight side
All of these1pxBug
!!

This tinyBug
However, if we useAbsolute Positioning
To processRounded Corner Effect
Then it is depressing ~ ···

* Solution: Set the parent width to an even number! Otherwise, you can only use css hack code!