<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title>IEbug</title> <style type=" Text/css "> <!--/*default css*/body{te Xt-align:center; font:12px/120% "Courier New", Courier, monospace; Color: #000;} code{font-family: "Courier New", Courier, monospace; border:1px solid #f60; display:block; padding:8px; margin:3px Round: #fff;} span.alt{color: #c00; font-weight:bold;} acronym {CURSOR:HELP; Font-weight:bold border-bottom:1px #f90 dashed; color: #c00;} a{color: #0099CC; text-decoration:none;} a:hover{color: #333333; text-decoration:underline;} #bug1, #bug2, #bug3 {margin-left:auto; margin-right:auto; width:780px; margin-bottom:10px; position:relative;} #bug1 div,bug2 div,bug3 Div{text-align:left;} . Wrap{width:500px;width/**/:530px; border:10px #f60 Solid; padding:10px; margin:10px Auto;} Html>body. wrap{width:500px;} . Wrap *{text-align:left;} /* Clear float*/. clearfix:after {content: "."; Display:block; height:0; Clear:both; Visibility:hidden; }. Clearfix {display:inline-table} /* hides from Ie-mac \*/. clearfix {height:1%;} . clearfix {Display:block} /* End hide from Ie-mac/clear{Clear:both} /*bug1*/#bug1 {} bugtitle{position:absolute; left:0px; top:0px width:100px; font:18px "Courier New", Courier, Monospa Ce font-weight:bold;padding:5px; Background: #f5f5f5;} #boxbug {width:500px;width/**/:530px; border:10px #f60 solid; margin:10px auto; padding:10px;} #boxbugie6 {width:500px; border:10px #f60 solid; margin:10px auto; padding:10px} Html>body #boxbugie6 {width:500px;} Html>body #boxbug {width:500px;} /*bug2*/#bug2 {} #ie3px, #ieno3px {float:left; width:100px; height:auto; min-height:50px; background: #f60;} p.ie3px,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;} /*bug3*/#bug3 {} #box1, #box2 {margin-left:50px; float:left; background: #f60; width:200px;} #box2 {/*float:none;*/display:inline;} --> </style> </pead> <body> <div id= "bug1" class= "Clearfix" > <div class= "bug Title ">ie 5.x/win and model bug</div> <div id=" boxbug "title=" box bug for ie5.x "> here is a width:500px;margin:10 px;padding:10px; a box of border:10px; Use WIDHT (space)/**/:530px to resolve the box resolution bug for the ie5.x series, because the ie5.x series browser can read this sentence. The results are consistent under ie5.x win,ie6.0 Win. <b> How to use hack to resolve ie5.x box parsing bug?</b> <code> #content {width:530px;//This is the wrong width, all browsers read Voice-fami Ly: ""}\ ""; IE5. X/win ignores <span class= "alt" > "}\" </span> content voice-family:inherit; width:500px; Some browsers, including Ie6/win, read the phrase, and the new value (300px) overrides the old} html>body #content {//<span class= "alt" >html>body</span > is the writing of CSS2 width:500px; Support CSS2 This wording of the browser is fortunate to read this sentence, IE 5.x does not support. } </code> <code> #content {width:500px!important; This is the correct width, most of the browsers that support!important tags use the value width (space)/**/:530px; Ie6/win does not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win reads this, the new value (400px) overrides the old, because the!important tag does not work for them} Html>body # Content {//<span class= "alt" >html>body</span> is the CSS2 writing width:500px; The browser that supports CSS2 this is fortunate to have read this phrase} </code> <code><!--[if Lte ie6]> #content {width:530px} <[!en dif]--> </code> </div> <div id= "Boxbugie6" > here is a width:500px;margin:10px;padding:10px; border:10px a box, ie5.x win parse is not normal. The IE6 box model is backward compatible while also accommodating the previous error, IE6 actually has two cores, in the old page he still shows the tolerance of the error, only in the document with a strictly document type (<acronym>DOCTYPE</acronym>) Declaration, IE6 is able to accept the correct box-model so hack must be included in the document with the correct DOCTYPE to work properly. </div> </div> <div id= "Bug2" class= "Clearfix" > <div class= "bugtitle" >ie/div floating text appears 3px Spacing of bug</div> <div class= "WRAP Clearfix "> <div id=" ie3px "> <p> here is the floating box</p> <P>&NBSP;</P&G T <p> </p> </div> <p class= "ie3px" > Left object is floating, here is the margin-left to locate, the text here will be 3px from the left The blank error. </p> </div> <div class= "Wrap Clearfix" > <div id= "ieno3px" > This is floating box, using the <span cl ass= "alt" >* HTML #floatbox2 {margin-right: -3px;} </span> resolution 3PX bug</div> <p class= "no3px" > Left object is floating, here is <span class= "alt" >* HTML p.no3px{he ight:1%;margin-left:0;} </span>, the text here will not have 3px blank error from the left. </p> </div> <div class= "wrap" > <p><strong>ie/div floating text appears with 3px spacing bug conditions:< /strong> when the left object is floating and the right object is positioned with the left margin of the outer patch (MARGIN-LEFT:?PX;), the text within the right object will have a 3px margin error from the left. </p> <strong>CSS:</strong> <code> #ie3px {float:left; width:100px; height:50px; Background: #f60;} /* Left Object floating * * p.ie3px{margin:0 0 0 100px; background: #333; text-align:left; color: #fff;} /* Right margin-left:?? px;*/</code> <strong>XHTML:</strong> <code><div id= "ie3px" > This is floating box</div> <p class= "ie3px" > Left object is floating, here is to use the margin-left to locate, the text here will be left 3px blank error. </p> </code> <p><strong>ie/div Floating text 3px spacing bug solution:</strong> use hack ; span class= "alt" >*html div{}</span> write a single style </p> <code>* html #ieno3px {margin-right:-3px for IE) * HTML p.no3px{height:1%;margin-left:0;} </code> <strong>CSS:</strong> <code> #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;} </code> <strong>XHTML:</strong> <code><div id= "ieno3px" > Here are floating box, using the <span class= "alt" >* HTML #floatbox2 {margin-right: -3px;} </span> resolution 3PX bug</div> <p class= "no3px" > Left object is floating, here is <span class= "alt" >* HTML p.no3px{ height:1%;margin-left:0;} </span>, the text here will not have 3px blank error from the left. </p></code> </div> </div> <div id= "Bug3" > <div class= "bugtitle" >ie/floating Object outer patch double distance </div> <div class= "Wrap Clearfix" > <div id= "box1" > this element, floating left-aligned (float:left), left-side patch (m argin-left:50px), in the wrap layer, but in IE browser Box1 from the left side of the distance will be 100px, and the actual distance should be 50px. When an element is used in a float:none floating state, IE is considered to be a block-level element, Display:block; </div> <div class= "Clear" > CSS: <code> #box1 {margin-left:50px fl Oat:left; Background: #f60; width:200px;} </code> XHTML: <code><div class= "wrap" > <div id= "box1" > this element, floating left-aligned ( float:left), left outer patch (margin-left:50px;), in the wrap layer, but in IE browser boThe distance from the left side of the X1 will be 100px, and the actual distance should be 50px. When an element is used in a float:none floating state, IE is considered to be a block-level element, Display:block; </div> </div></code> </div> </div> <div class= "Wrap Clearfix" ; <div id= "Box2" > This is an element with the correct margin-left, the solution is to make the floating effect disappear, where the display:inline is used; the principle can be read on the having layout. </div> <div class= "Clear" > CSS: <code> #box2 {margin-left:50px fl Oat:left; Background: #f60; width:200px; Display:inline;} </code> XHTML: <code><div class= "wrap" > <div id= "Box2" > This is a right Marg In-left elements, the solution is to make the floating effect disappear, where the use of display:inline, the principle can be read on the having layout. </div> </div></code> </div> </div> </div> </body& Gt </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
