武道至尊帝临小说,小说阅读网站

主頁 > 知識庫 > IE 5.x/Win 和模型bug

IE 5.x/Win 和模型bug

<!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">  </style> </head> <body> <div   class="pf5btl5"   id="bug1" class="clearfix">          <div   id="xjntzp7"   class="bugTitle">IE 5.x/Win 和模型bug</div>       <div   class="bdhnrj7"   id="boxbug" title="box bug for IE5.x">這里是一個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: quot;\quot;}\quot;quot;;   //IE5.X/win忽略了<span id="dfxd5jb"    class="alt">quot;\quot;}\quot;quot;</span>后的內(nèi)容 voice-family:inherit; width:500px;   //包括IE6/win在內(nèi)的部分瀏覽器讀到這句，新的數(shù)值(300px)覆蓋掉了舊的 }  htmlgt;body #content {   //<span id="vb77nhl"    class="alt">htmlgt;body</span>是CSS2的寫法 width:500px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句,IE 5.x不支持的。 } </code> <code>#content {  width:500px !important;   //這個是正確的width，大部分支持!important標記的瀏覽器使用這里的數(shù)值 width(空格)/**/:530px;   //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數(shù)值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用 }  htmlgt;body #content { //<span id="75v5hb7"    class="alt">htmlgt;body</span>是CSS2的寫法 width:500px;   //支持CSS2該寫法的瀏覽器有幸讀到了這一句 } </code> <code>lt;!--[if Lte IE6]gt;  #content {  width:530px } lt;[!endif]--gt; </code>     </div>     <div   class="7ndvzdt"   id="boxbugie6">這里是一個width:500px;margin:10px;padding:10px; border:10px;的一個盒子，IE5.x Win解析不正常。IE6盒模型在向后兼容的同時也包容了以前的錯誤，IE6其實有兩個核心，在舊的頁面前他仍舊表現(xiàn)出對錯誤的寬容，只有在文檔中嚴格地加上文檔類型(DOCTYPE</acronym>)聲明，IE6才能夠接受正確的box-model所以，hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作。</div> </div> <div   class="h7557n7"   id="bug2" class="clearfix">          <div   id="vz57tj5"   class="bugTitle">IE/div浮動文本出現(xiàn)3px間距的bug</div>     <div   id="55v75z7"   class="wrap clearfix">         <div   class="hvbrb5h"   id="ie3px">           <p>這里是浮動box</p>           <p>nbsp;</p>           <p>nbsp;</p>         </div>         <p class="ie3px">左邊對象是浮動的，這里是采用margin-left來定位，這里的文本會離左邊有3px的空白誤差。</p>   </div>     <div   id="d5dhxpt"   class="wrap clearfix">         <div   class="fx575d7"   id="ieno3px">這里是浮動box,使用了<span id="vdfjdtj"    class="alt">* html #floatbox2 {margin-right: -3px;}</span>解決3px bug</div>         <p class="no3px">左邊對象是浮動的，這里是采用<span id="5dvbhlr"    class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，這里的文本會離左邊沒有了3px的空白誤差。</p>       </div>   <div   id="jzdldvb"   class="wrap">         <p><strong>IE/div浮動文本出現(xiàn)3px間距的bug產(chǎn)生的條件:</strong>             當左邊對象是浮動的，右邊對象采用外補丁的左邊距(margin-left:?px;)來定位，則右邊對象內(nèi)的文本會離左邊有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>lt;div id=quot;ie3pxquot;gt;這里是浮動boxlt;/divgt; lt;p class=quot;ie3pxquot;gt;左邊對象是浮動的，這里是采用margin-left來定位，這里的文本會離左邊有3px的空白誤差。lt;/pgt;         </code>     <p><strong>IE/div浮動文本出現(xiàn)3px間距的bug解決方法:</strong>       利用hack <span id="tvnxrj5"    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>lt;div id=quot;ieno3pxquot;gt;這里是浮動box,使用了lt;span class=quot;altquot;gt;* html #floatbox2 {margin-right: -3px;}lt;/spangt;解決3px buglt;/divgt; lt;p class=quot;no3pxquot;gt;左邊對象是浮動的，這里是采用lt;span class=quot;altquot;gt;* html p.no3px{height:1%;margin-left: 0;}lt;/spangt;，這里的文本會離左邊沒有了3px的空白誤差。lt;/pgt;</code>   </div> </div> <div   class="5lrvzff"   id="bug3">          <div   id="75v7dfx"   class="bugTitle">IE/浮動對象外補丁的雙倍距離</div>     <div   id="r5jzrxb"   class="wrap clearfix">         <div   class="l5nr5nf"   id="box1">這個元素，浮動左對齊（float:left）,左側外補丁(margin-left:50px;),在wrap層內(nèi)，但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用于非float:none;的浮動狀態(tài)時，IE下該元素既被視為塊級元素，display:block;         </div>         <div   id="vxpvzrv"   class="clear">             CSS:                 <code>#box1{ margin-left:50px; float:left; background:#f60; width:200px;}</code>             XHTML:                 <code>lt;div class=quot;wrapquot;gt; lt;div id=quot;box1quot;gt;這個元素，浮動左對齊（float:left）,左側外補丁(margin-left:50px;),在wrap層內(nèi)，但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用于非float:none;的浮動狀態(tài)時，IE下該元素既被視為塊級元素，display:block; lt;/divgt;       lt;/divgt;</code>        </div>     </div>     <div   id="7nf5fvz"   class="wrap clearfix">         <div   class="7t5bfxb"   id="box2">這是個擁有正確margin-left的元素，解決的辦法就是，使浮動效果消失,這里采用了display:inline;原理可參閱on having layout。</div>         <div   id="z5rvlrf"   class="clear">             CSS:                 <code>#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}                </code>             XHTML:                 <code>lt;div class=quot;wrapquot;gt; lt;div id=quot;box2quot;gt;這是個擁有正確margin-left的元素，解決的辦法就是，使浮動效果消失,這里采用了display:inline;原理可參閱on having layout。lt;/divgt;       lt;/divgt;</code>                 </div>     </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

標簽：東莞喀什邯鄲陽泉濱州海東遼源南充

巨人網(wǎng)絡通訊聲明：本文標題《IE 5.x/Win 和模型bug》，本文關鍵詞 5.x,Win,和,模型,bug,5.x,Win,；如發(fā)現(xiàn)本文內(nèi)容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。

濮阳杆衣贸易有限公司

IE 5.x/Win 和模型bug