IE 5.x/Win 和模型bug_經驗交流
來源：互聯網
上載者：User
<!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"> <head> <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; background:#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, 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> </head> <body> IE 5.x/Win 和模型bug 這裡是一個width:500px;margin:10px;padding:10px; border:10px;的一個盒子.使用widht(空格)/**/:530px，解決IE5.x系列的盒解析bug，因為IE5.x系列瀏覽器能讀到這句.在IE5.x Win，IE6.0 Win下效果一致.<b>如何使用hack解決IE5.x盒解析bug?</b> <code>#content { width:530px; //這個是錯誤的width，所有瀏覽器都讀到了 voice-family: "\"}\""; //IE5.X/win忽略了<span class="alt">"\"}\""</span>後的內容 voice-family:inherit; width:500px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的 } html>body #content { //<span class="alt">html>body</span>是CSS2的寫法 width:500px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句,IE 5.x不支援的。 } </code> <code>#content { width:500px !important; //這個是正確的width，大部分支援!important標記的瀏覽器使用這裡的數值 width(空格)/**/:530px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用 } html>body #content { //<span class="alt">html>body</span>是CSS2的寫法 width:500px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句 } </code> <code><!--[if Lte IE6]> #content { width:530px } <[!endif]--> </code> 這裡是一個width:500px;margin:10px;padding:10px; border:10px;的一個盒子，IE5.x Win解析不正常。IE6盒模型在向後相容的同時也包容了以前的錯誤，IE6其實有兩個核心，在舊的頁面前他仍舊錶現出對錯誤的寬容，只有在文檔中嚴格地加上文件類型(DOCTYPE</acronym>)聲明，IE6才能夠接受正確的box-model所以，hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作。 IE/div浮動文本出現3px間距的bug <p>這裡是浮動box</p> <p> </p> <p> </p> <p class="ie3px">左邊對象是浮動的，這裡是採用margin-left來定位，這裡的文本會離左邊有3px的空白誤差。</p> 這裡是浮動box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解決3px bug <p class="no3px">左邊對象是浮動的，這裡是採用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，這裡的文本會離左邊沒有了3px的空白誤差。</p> <p><strong>IE/div浮動文本出現3px間距的bug產生的條件:</strong> 當左邊對象是浮動的，右邊對象採用外補丁的左邊距(margin-left:?px;)來定位，則右邊對象內的文本會離左邊有3px的空白誤差。 </p> <strong>CSS:</strong> <code>#ie3px{float: left; width: 100px; height: 50px; background: #f60;}/*左邊對象浮動*/ p.ie3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}/*右邊margin-left:??px;*/ </code> <strong>XHTML:</strong> <code>這裡是浮動box <p class="ie3px">左邊對象是浮動的，這裡是採用margin-left來定位，這裡的文本會離左邊有3px的空白誤差。</p> </code> <p><strong>IE/div浮動文本出現3px間距的bug解決方案:</strong> 利用hack <span class="alt">*html div{}</span>為IE單獨寫一個樣式</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>這裡是浮動box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解決3px bug <p class="no3px">左邊對象是浮動的，這裡是採用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，這裡的文本會離左邊沒有了3px的空白誤差。</p></code> IE/浮動物件外補丁的雙倍距離 這個元素，浮動靠左對齊（float:left）,左側外補丁(margin-left:50px;),在wrap層內，但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用於非float:none;的浮動狀態時，IE下該元素既被視為區塊層級元素，display:block; CSS: <code>#box1{ margin-left:50px; float:left; background:#f60; width:200px;}</code> XHTML: <code> 這個元素，浮動靠左對齊（float:left）,左側外補丁(margin-left:50px;),在wrap層內，但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用於非float:none;的浮動狀態時，IE下該元素既被視為區塊層級元素，display:block; </code> 這是個擁有正確margin-left的元素，解決的辦法就是，使浮動效果消失,這裡採用了display:inline;原理可參閱on having layout。 CSS: <code>#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;} </code> XHTML: <code> 這是個擁有正確margin-left的元素，解決的辦法就是，使浮動效果消失,這裡採用了display:inline;原理可參閱on having layout。 </code> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
