溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
IE6下margin雙倍邊距Bug的處理辦法是什么，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
你對于margin雙倍邊距Bug問題是否熟悉，這里和大家分享一下IE6下margin雙倍邊距Bug的處理辦法。
IE6下margin雙倍邊距Bug的處理辦法
一、什么是雙邊距Bug？
先來看圖：
我們要讓綠色盒模型在藍色盒模型之內向左浮動，并且距藍色盒模型左側100像素。這個例子很常見，比如在網頁布局中，側邊欄靠左側內容欄浮動，并且要留出內容欄的寬度。要實現這樣的效果，我們給綠色盒模型應用以下CSS屬性：
以下為引用的內容：
.floatbox{ float:left; width:150px; height:150px; margin:5px05px100px; /*外邊距的***一個值保證了100像素的距離*/ }很簡單，但是當我們在IE6中查看時，會發現左側外邊距100像素，被擴大到200個像素。如下圖：
二、怎么會這樣？
說實話，這個原因還真是不清楚。但是這樣的結果確確實實在IE6中出現了。而且這種情況出現的條件是當浮動元素的浮動方向和浮動邊界的方向一致時才會出現。如同上面的例子一樣，元素向左浮動并且設置了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動并且設置右邊距也會出現同樣的情況。同一行如果有多個浮動元素，***個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。
三、如何修正這個Bug？
很簡單，只需要給浮動元素加上display:inline;這樣的CSS屬性就可以了。就這么簡單？對，就這么簡單。如下圖：
CSS代碼如下：
以下為引用的內容：
.floatbox{ float:left; width:150px; height:150px; margin:5px05px100px; display:inline; }看完上述內容，你們掌握IE6下margin雙倍邊距Bug的處理辦法是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
