DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁制作教程:IE下div出現3個像素的Bug問題
網頁制作教程:IE下div出現3個像素的Bug問題
編輯:CSS進階教程     

描述:IE下兩個div之間會出現3個像素的Bug,這個bug是在當對一個div用了float元素時,而令一個div未使用時則會出現。

解決方法:a.對另一個元素同時使用float; b.為不浮動的div添加一條語句:margin-right:-3px; 或者margin-left:-3px; ;

#container {margin:0 auto; width:100%;}
#sidebar { float:left; width:200px; height:500px; background:#9c6;}
#sidebar2 { float:right; width:200px; height:500px; background:#9c6;}
#content { margin:0 205px ; _margin:0 202px; height:500px; background:#ffa;}

當浮動元素與非浮動元素相鄰時,這個3像素的Bug就會出現,它會偏移3像素。只要觸發IE的hasLayout,非浮動元素就會擁有布局。所以,利用IE6特有的hack規則,為它單獨寫樣式就可修復此問題:_zoom:1;margin-left: value;_margin-left: value-3px;zoom 是IE觸發Layout條件之一,因為它是IE特有的CSS規則,所以采用zoom。margin-left: value-3px 是修復IE6 中3px 的bug。此前采用非浮動元素也浮動的方法修復bug,現在我們可以試試這個新的方法了!注:前面的下劃線是專門寫給IE7以下版本的hack!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved