<! 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= "text/html; charset=gb2312 "/> <title>IEbug</title> <style type=" Text/css "> <!--/*default css*/body{ Text-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; backg 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 h IDE from IE-MAC */. clear{clear:both;}/*bug1*/#bug1 {}. bugtitle{position:absolute; left:0px; top:0px; width:100px; fon t:18px "Courier New", Courier, monospace; 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> IE 5.x/win and model bugs Here is a width:500px;margin:10px;padding:10px; border:10px a box. Use the WIDHT (space)/**/:530px to resolve the box parsing bug in the ie5.x series, because the ie5.x series browser can read this sentence. Same effect in ie5.x win,ie6.0 Win .<b> How to use hack to solve ie5.x box parsing bug?</b> <code> #content {width:530px;//This is the wrong width, all browsers read voice-family: "\"}\ ""; IE5. X/win ignores <span class= "alt" > "\"}\ "" </span> content Voice-family:inherit; width:500px; Some browsers, including Ie6/win, read this sentence, and the new value (300px) overwrites the old} html>body #content {//<span class= "alt" >html>body</span& gt; is the CSS2 width:500px; Support CSS2 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 tag use the numeric width (space)/**/:530px here; Ie6/win Not parse this sentence, so Ie6/win stillThe value of width is assumed to be 300px, and Ie5.x/win reads this sentence, the new value (400px) overrides the old one because the!important tag does not work for them} html>body #content {//<span class= " Alt ">html>body</span> is CSS2 width:500px; Support CSS2 The browser was fortunate enough to read this sentence} </code> <code><!--[if Lte ie6]> #content {width:530px} <[!endif]--> </code> here is a width:500px;margin:10px;padding:10px; border:10px a box, ie5.x win parsing is not normal. The IE6 box model is backwards compatible with previous errors, IE6 actually has two cores, and he still shows tolerance for errors in front of the old page, with only the document type (doctype</acronym>) declaration strictly added to the document. IE6 is able to accept the correct box-model so hack must be included with the correct DOCTYPE in the document to work properly. Ie/div floating text appears 3px pitch bug <p> here is floating box</p> <p> </p> <P&G T </p> <p class= "ie3px" > Left object is floating, here is the use of margin-left to locate, here the text will be left 3px blank error. </p> here is the floating box, using the <span class= "alt" >* HTML #floatbox2 {margin-right: -3px;} </span> fix 3px bug <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 a 3px blank error from the left. </p> <p><strong>ie/div Floating text occurs when a bug produces a 3px pitch:</strong> when the left object is floating, the right object is Using the outer patch's left margin (margin-left:?px;), the text within the right object will have a 3px blank error from the left. </p> <strong>CSS:</strong> <code> #ie3px {float:left; width:100px; height:50px; b Ackground: #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> Here is the floating box <p class= "ie3p X "> Left object is floating, here is the use of margin-left to locate, here the text will be left with 3px blank error. </p> </code> <p><strong>ie/div Floating text 3px spacing bug resolution:</strong> using hack <spa n class= "alt" >*html div{}</span> for IE to write a single style </p> <code>* html #ieno3px {margin-right:-3px;} * 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> Here is the floating box, using the <span class= "alt" >* HTML # Floatbox2 {margin-right: -3px;} </span> fix 3px bug <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 a 3px blank error from the left. </p></code> ie/Floating Object The double distance of the patch is this element, floating left-aligned (float:left), left-side patch (margin-left:50px;), within the wrap layer , but in IE browser the distance from the left is 100px, and the actual distance should be 50px Box1. When an element is used for non-float:none, the floating state, ie the element is considered as block-level element, Display:block; CSS: <code> #box1 {margin-left:50px; float:left; background: #f60; width:200px;} </code> XHTML: <code> This element, floating leftAlignment (Float:left), the left side patch (margin-left:50px;), within the wrap layer, but in IE browser Box1 distance from the left will be 100px, and the actual distance should be 50px. When an element is used for non-float:none, the floating state, ie the element is considered as block-level element, Display:block; </code> This is an element with the right margin-left, and the solution is to make the floating effect disappear, where display:inline is used, and the principle can be found on the having layout. CSS: <code> #box2 {margin-left:50px; float:left; background: #f60; width:200px; d Isplay:inline;} </code> XHTML: <code> This is an element with the right margin-left, the solution is to make the floating effect disappear, where the display:inline is used; See on have layout. </code> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
