css中margin各种bug怎么解决

1、　　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的元素上。

3、　　IE6/7负margin隐藏Bug：　　发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时，超出父元素部分不可见。　　解决方法：去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;　　原理分析：iE6/7独有的hasLayout产生问题。

6、　　IE6/7/8下auto margin居中bug：　　发生场合：给block元素设置margi荏鱿胫协n auto无法居中　　解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加 with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。　　原理分析：缺少Doctype声明。

7、　　IE8下input[button | submit] 设置margin:auto无法居中bug：　　发生场合：ie8下，如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。　　解决方法：可以给为input加上宽度　　原理分析：IE8浏览器Bug

8、　　IE8百分比padding垂直margin bug：　　发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。　　解决方法：给父元素加一个overflow:hidden/auto。　　原理分析：IE8浏览器Bug