IE6 margin 雙倍邊距解決方案

2021-07-11 21:50:17 字數 695 閱讀 2863

一、什麼是雙邊距bug?

這個例子很常見,比如在網頁布局中,側邊欄靠左側內容欄浮動,並且 要留出內容欄的寬度。要實現這樣的效果,我們給綠色盒模型應用以下css屬性:

以下為引用的內容:

.floatbox

很簡單,對吧?但是當我們在ie6中檢視時,會發現左側外邊距100畫素,被擴大到200個畫素。

二、怎麼會這樣?

說實話,這個原因還真是不清楚。但是這樣的結果確確實實在ie6中出現了。而且這種情況出現的條件是當浮動元素的浮動方向和浮動邊界的方向一致時才 會出現。如同上面的例子一樣,元素向左浮動並且設定了左側的外邊距出現了這樣的雙邊距bug。同理,元素向右浮動並且設定右邊距也會出現同樣的情況。同一 行如果有多個浮動元素,第乙個浮動元素會出現這個雙邊距bug,其它的浮動元素則不會。

三、如何修正這個bug?

很簡單,只需要給浮動元素加上display:inline;這樣的css屬性就可以了。就這麼簡單?對,就這麼簡單。如下圖:

css**如下:

以下為引用的內容:

.floatbox { 

float: left; 

width: 150px; 

height: 150px; 

margin: 5px 0 5px 100px; 

display: inline; 

0

給主人留下些什麼吧!~~

IE6雙倍邊距 IE6瀏覽器會出現雙倍邊距解決方法

所謂的ie6雙倍邊距就是指當元素有float屬性,又有margin屬性時,在ie6下程式設計客棧面顯示的margin的值是設定值的兩倍。下面的 摺疊展開xml html code 複製 如下 ie6顯示效果為 ie8顯示效果為 可以看得出來左邊距在ie6下面明顯比ie8下面的大,在ie6下面的左邊距...

IE6雙倍margin間距解決方案

問題 在ie6下如果某個標籤使用了float屬性,同時設定了其外補丁 margin 10px 0 0 10px 可以看出,上邊距和左邊距同樣為10px,但第乙個物件距左邊有20px。解決辦法 方法一 當將其display屬性設定為inline時問題就都解決了。說明 這是因為塊級物件預設的 displ...

IE6下margin雙倍的問題解決辦法

有時候我們給div乙個margin屬性的時候,在ie6下會發現,這個margin間距產生了雙倍的效果,例如 float left margin left 10px 首頁 這段 在ff和ie7以上版本均正常,但是在ie6下,左間距就會變為20px,這是因為,ie6下當div有float浮動屬性時mar...