IEbug 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下效果一致.如何使用hack解決IE5.x盒解析bug? #content { width:530px; //這個是錯誤的width,所有瀏覽器都讀到了 voice-family: "/"}/""; //IE5.X/win忽略了"/"}/""后的內容 voice-family:inherit; width:500px; //包括IE6/win在內的部分瀏覽器讀到這句,新的數值(300px)覆蓋掉了舊的 } html>body #content { //html>body是CSS2的寫法 width:500px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句,IE 5.x不支持的。 } #content { width:500px !important; //這個是正確的width,大部分支持!important標記的瀏覽器使用這里的數值 width(空格)/**/:530px; //IE6/win不解析這句,所以IE6/win仍然認為width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因為!important標記對他們不起作用 } html>body #content { //html>body是CSS2的寫法 width:500px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句 } <!--[if Lte IE6]> #content { width:530px } <[!endif]--> 這里是一個width:500px;margin:10px;padding:10px; border:10px;的一個盒子,IE5.x Win解析不正常。IE6盒模型在向后兼容的同時也包容了以前的錯誤,IE6其實有兩個核心,在舊的頁面前他仍舊表現出對錯誤的寬容,只有在文檔中嚴格地加上文檔類型(DOCTYPE)聲明,IE6才能夠接受正確的box-model所以,hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作。 IE/div浮動文本出現3px間距的bug 這里是浮動box 左邊對象是浮動的,這里是采用margin-left來定位,這里的文本會離左邊有3px的空白誤差。 這里是浮動box,使用了* html #floatbox2 {margin-right: -3px;}解決3px bug 左邊對象是浮動的,這里是采用* html p.no3px{height:1%;margin-left: 0;},這里的文本會離左邊沒有了3px的空白誤差。 IE/div浮動文本出現3px間距的bug產生的條件: 當左邊對象是浮動的,右邊對象采用外補丁的左邊距(margin-left:?px;)來定位,則右邊對象內的文本會離左邊有3px的空白誤差。 CSS: #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;*/ XHTML: <div id="ie3px">這里是浮動box</div> <p class="ie3px">左邊對象是浮動的,這里是采用margin-left來定位,這里的文本會離左邊有3px的空白誤差。</p> IE/div浮動文本出現3px間距的bug解決方法: 利用hack *html div{}為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">這里是浮動box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解決3px bug</div> <p class="no3px">左邊對象是浮動的,這里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>,這里的文本會離左邊沒有了3px的空白誤差。</p> IE/浮動對象外補丁的雙倍距離 這個元素,浮動左對齊(float:left),左側外補丁(margin-left:50px;),在wrap層內,但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用于非float:none;的浮動狀態時,IE下該元素既被視為塊級元素,display:block; CSS: #box1{ margin-left:50px; float:left; background:#f60; width:200px;} XHTML: <div class="wrap"> <div id="box1">這個元素,浮動左對齊(float:left),左側外補丁(margin-left:50px;),在wrap層內,但在IE瀏覽器中Box1離左邊的距離會是100px,而實際距離應是50px。當一個元素用于非float:none;的浮動狀態時,IE下該元素既被視為塊級元素,display:block; </div> </div> 這是個擁有正確margin-left的元素,解決的辦法就是,使浮動效果消失,這里采用了display:inline;原理可參閱on having layout。 CSS: #box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;} XHTML: <div class="wrap"> <div id="box2">這是個擁有正確margin-left的元素,解決的辦法就是,使浮動效果消失,這里采用了display:inline;原理可參閱on having layout。</div> </div> [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] HTML/CSS技術:IE 5.x/Win 和模型bug,轉載需保留來源! 鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。