收集一些关于IE的BUG

收集摘录了一些bug虽然是远古浏览器，还是得注意一下吧…

IE6中双边距Bug：
发生场合：
当浮动元素（浮动后默认为block级元素）的浮动方向和margin方向相同时产生。
解决方法：
给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。总之是激发该元素的haslayout即可，通常使用zoom：1实现。因为zoom属性可以激发haslayout且没什么影响。
原理分析：
熟悉一下远古IE浏览器haslayout的存在非常重要，使用zoom来激活layout提炼bug也非常重要。

IE6/7负margin隐藏Bug：
发生场合：当给一个有haslayout的父元素内的非hasLayout元素设置负margin时，超出父元素部分不可见。
解决方法：去掉父元素的haslayout，或者激发子元素的haslayout
原理分析：haslayout产生问题。

IE6/7下ul/ol标记消失bug：
发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。
解决方法：激发子元素的haslayout
原理分析：haslayout产生问题。

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无法居中
发生场合：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。