在css中margin有很多問題值得我們關注，其中在IE下就有很多bug，這裡總結了一下，大家參考一下。
工具/原料
瀏覽器
文字編輯器
方法/步驟
IE6中雙邊距Bug：
發生場合：當給父元素內第一個浮動元素設定margin-left(元素float:left)或margin-right(元素float:right)時margin加倍。
解決方法：是給浮動元素加上display:inline;CSS屬性;或者用padding-left代替margin-left。
原理分析：塊級物件預設的display屬性值是block，當設定了浮動的同時，還設定了它的外邊距就會出現這種情況。也許你會問：“為什麼之後的物件和第一個物件之間就不存在雙倍邊距的Bug”?因為浮動都有其相對應的物件，只有相對於其父物件的浮動物件才會出現這樣的問題。第一個物件是相對父物件的，而之後物件是相對第一個物件的，所以之後物件在設定後不會出現問題。為什麼display:inline可以解決這個雙邊距bug，首先是 inline元素或inline-block元素是不存在雙邊距問題的。然後，float:left等浮動屬性可以讓inline元素 haslayout，會讓inline元素表現得跟inline-block元素的特性一樣，支援高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。
IE6中浮動元素3px間隔Bug：
發生場合：發生在一個元素浮動，然後一個不浮動的元素自然上浮與之靠近會出現的3px的bug。
解決方法：右邊元素也一起浮動;或者為右邊元素新增IE6 Hack _margin-left:-3px;從而消除3px間距。
原理分析：IE6瀏覽器缺陷Bug。
IE6/7負margin隱藏Bug：
發生場合：當給一個有hasLayout的父元素內的非hasLayout元素設定負marin時，超出父元素部分不可見。
解決方法：去掉父元素的hasLayout;或者賦hasLayout給子元素,並新增position:relative;
原理分析：iE6/7獨有的hasLayout產生問題。
IE6/7下ul/ol標記消失bug：
發生場合：當ul/ol觸發了haslayout並且是在ul/ol上寫margin-left，前面預設的ul/ol標記會消失。
解決方法：給li設定margin-left，而不是給ul/ol設定margin-left。
原理分析：IE6/7瀏覽器Bug
IE6/7下margin與absolute元素重疊bug：
發生場合：雙欄自適應佈局中，左側元素absolute絕對定位，右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。
解決方法：把左側塊級元素更改為內聯元素，比如把div更換為span。
原理分析：這是由於IE6/IE7瀏覽器將inline水平標籤元素和block水平的標籤元素沒有加以區分一視同仁渲染了。屬於IE6/7瀏覽器渲染Bug。
IE6/7/8下auto margin居中bug：
發生場合：給block元素設定margin auto無法居中
解決方法：出現這種bug的原因通常是沒有Doctype，然後觸發了ie的quirks mode，加上Doctype宣告就可以了。在《打敗IE的葵花寶典》裡給出的方法是給block元素新增一個width能夠解決，但根據本人親測，加 with此種方法是無效的，如果沒有Doctype即使給元素新增width也無法讓block元素居中。
原理分析：缺少Doctype宣告。
IE8下input[button submit] 設定margin:auto無法居中bug：
發生場合：ie8下，如果給像button這樣的標籤(如button input[type="button"] input[type="submit"])設定{ display: block; margin:0 auto; }如果不設定寬度的話無法居中。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug
IE8百分比padding垂直margin bug：
發生場合：當父元素設定了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設定了margin一樣。
解決方法：給父元素加一個overflow:hidden/auto。
原理分析：IE8瀏覽器Bug
注意事項
基本上就這些了，做網站一定要保證測試相容性哦！
本文由言小魚整理髮布，如果對您有幫助請投一票，謝謝！