IE 5.x/ Win and model bug

Xmlns = "http://www.w3.org/1999/xhtml">

IE 5.x/ Win and model bug here is a box with width: 500px; margin: 10px; padding: 10px; border: 10px.
Use widht (Space)/**/: 530px to solve the box parsing bug of IE5.x series, because IE5.x series browsers can read this sentence. The results are consistent in IE5.x Win and IE6.0 Win.
How to Use hack to solve the IE5.x box parsing bug?
# Content {

Width: 530px; // This is the incorrect width, which is read by all browsers.

Voice-family: "\"} \ "; // IE5.X/win ignores the content after "\ "} \"

Voice-family: inherit;

Width: 500px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one.

}

Html> body # content {// html> body is written in CSS2.

Width: 500px; // the browser that supports the CSS2 statement has the honor to read this sentence, which is not supported by IE 5.x.

}
#content {

Width: 500px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here

Width (Space)/**/: 530px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when IE5.X/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them

}

Html> body # content {// html> body is written in CSS2.

Width: 500px; // the browser that supports CSS2 is lucky enough to read this sentence.

}
<!--[if Lte IE6]>

#content {

width:530px

}

<[!endif]-->

Here is a box of width: 500px; margin: 10px; padding: 10px; border: 10px;, IE5.x Win resolution is not normal.
The IE6 box model is backward compatible with previous errors. In fact, IE6 has two cores, and he still shows tolerance for errors before the old pages, only strictly Add the document type (DOCTYPE) Statement, IE6 can accept the correct box-model. Therefore, hack must be included in the document with the correct DOCTYPE in order to work properly.

IE/div floating text with a 3px padding bug

Here is the floating box

The object on the left is floating, and margin-left is used to locate the object. The text here is 3 px blank from the left.

Here is the floating box. * html # floatbox2 {margin-right:-3px;} is used to solve the 3px bug.

The object on the left is floating, and * html p. no3px {height: 1%; margin-left: 0 ;}is used here. The text here will not have a blank error of 3px from the left.

The condition for generating a 3px padding bug in IE/div floating text:

When the left object is floating, the right object uses the left margin (margin-left :? Px;), the text in the right object will be 3 px blank from the left.

CSS:
# Ie3px {float: left; width: 100px; height: 50px; background: # f60;}/* floating object on the left */

P. ie3px {margin: 0 0 100px; background: #333; text-align: left; color: # fff ;}/ * right margin-left :?? Px ;*/

XHTML:
<Div id = "ie3px"> floating box </div>

<P class = "ie3px"> the object on the left is floating. Here we use margin-left to locate the object. The text here is 3 px blank from the left. </P>


Solution to the bug of 3px padding in the floating text of IE/div:

Use hack * html div {} to write a style for IE

* html #ieno3px{margin-right:-3px;}

* html p.no3px{height:1%;margin-left: 0;}
CSS:
#ieno3px{float: left; width: 100px; height: 50px; background: #f60;}

p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}

* html #ieno3px{margin-right:-3px;}

* html p.no3px{height:1%;margin-left: 0;}
XHTML:
<Div id = "ieno3px"> here is the floating box. <span class = "alt"> * html # floatbox2 {margin-right:-3px;} is used ;} </span> fix the 3px bug </div>

<P class = "no3px"> the object on the left is floating. <span class = "alt"> * html p is used here. no3px {height: 1%; margin-left: 0 ;}</span>, the text here is no blank error of 3px from the left. </P>

IE/floating object outside the patch double distance this element, floating left alignment (float: left), left outer patch (margin-left: 50px;), In the wrap layer, however, in IE browser, the Box1 distance to the left is PX, while the actual distance should be 50 PX. When an element is used for a non-float: none; floating state, this element in IE is regarded as a block-level element, display: block; CSS:
#box1{ margin-left:50px; float:left; background:#f60; width:200px;}
XHTML:
<Div class = "wrap">

<Div id = "box1"> the floating left alignment (float: left), left outer patch (margin-left: 50px;), In the wrap layer, however, in IE browser, the Box1 distance to the left is PX, while the actual distance should be 50 PX. When an element is used for a non-float: none; floating state, this element in IE is regarded as a block-level element, display: block;

</Div>

</div>

This is an element with the correct margin-left. The solution is to make the floating effect disappear. The display: inline is used here. For details, see on having layout. CSS:
#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}
XHTML:
<Div class = "wrap">

<Div id = "box2"> This is an element with the correct margin-left. The solution is to make the floating effect disappear. display: inline is used here; for the principle, see on having layout. </Div>

</div>