CSS in the IE6 of the next bilateral pitch bug solution

In fact, this problem in just learning CSS when you know how to solve, but always do not know why this phenomenon, the way to record today.

1. Why is there a bilateral margin bug?

<style type="Text/css">    Body,Div{padding: 0;  margin: 0; }    . Box{border: tenpx solid black;  float: left; }    . Inner{width: + px;  height: + px;  background: red;  float: left;  margin: 0 px; }    . Inner2{width: + px;  height: + px;  background: red;  float: left;  margin: 0 px; }}</style><div class="box">    <div class="inner"></div>    <div class="Inner2"></div></div>

As the above picture in fact we in a father Div nested a son div element, to the son Div, son div in setting margin-left:100px when actually in IE6 will appear 200px effect. This is because the default display property value for block-level objects is block, which occurs when a float is set and its margin is set. You might ask, "Why is there no double margin bug between the second son object and the first son object?" Because floats have their corresponding objects, this problem only occurs with floating objects that are relative to their parent objects. The first son object is relative to the parent object, and the second son object is relative to the first son object, so the second son object does not have a problem after it is set. In addition, in some special layouts, it may be necessary to combine display:block and display:inline to achieve the desired results.

2. Solution

Set in the first son object divdisplay: inline

Summary: This phenomenon only appears in the block element, and the inline element does not appear in this phenomenon, but also do not appear on the bottom margin of the situation, if not really can also try to use the hack method, but not recommended this way (not conducive to late maintenance), also does not conform to the Web standards.

CSS in the IE6 of the next bilateral pitch bug solution