IE常见Bug

1：浮动元素的双倍margin

浮动元素双倍margin，IE6以及下，给元素设置float和同方向的margin：

.demo {
    background: #95cfef;
    border: 1px solid #36f;
    float: left;
    height: 100px;
    margin: 30px 0 0 30px;
    width: 300px;
}

结果就是在IE6中，元素左边距离边框的距离是60px，而不是30px
Answer：改变浮动元素的显示风格，也就是说在浮动元素中增加“display:inline”属性

2：Box Model的bug

Box Model的Bug是由于同时给一个元素设置了宽度和高度和元素的padding或border值，此时将改变元素的真正大小。
主要的结果是对应的Padding值加入到了元素的宽度或高度中，造成元素大小发生变化
Answer：将padding的值和宽长度的设置分开即可

3：设置元素的最小高度

在IE6中是不识别元素的min-height属性，所以没有办法设置对应的高度值
Answer：
！important的使用，对于识别的浏览器采用auto的方式获得高度，对于IE6显示的设置最小高度：

.demo {
    min-height: 100px;
    height: auto !important;/*现代浏览器下，内容高度超过100px时自动获得其高度*/
    height: 100px;/*此值设置和min-height值一样，因为IE6下元素高度会根据内容自己的高度而定，所以内容高度低于min-height值时，为了达到min-height效果，需要给元素一个显式的高度值*/
}

子选择器的使用，由于IE6不支持子选择器，则可以如下：

.demo {
    min-height: 100px;
    height: 100px;
}
html>body .demo {
    height: auto;/*只有现代浏览器才能识别*/
}

4：块元素水平居中

基本的水平居中就是设置左右margin值为auto

margin: XXpx auto; 

但是IE6的quirks模式不识别margin的auto属性值，所以再次在修改父级元素的属性值text-align:center。

5：IE6下无法设置元素的微高

用div元素模式line，在IE6下，对于过低的height不识别，主要原因就是在IE浏览器下，拒绝高度小于字号的设置，所以在绘制line的时候把字号设置为0即可
或者设置overflow:hidden将超出的部分隐藏

6：overflow:auto PK position:relative

在父级元素设置了overflow:auto之后，在IE6/7中的子元素如果高度大于父级元素的高度，则超出部分不会被隐藏，会飘离出来：
Answer：设置父级元素position:relative

7：浮动层错位

内容超出容器自定义宽度，一般的浏览器中，容器内超出的部分会超出元素的边缘，但是在IE6下，会扩大容器的宽度，如果后面跟有一个拥有浮动属性的元素，则会造成浮动层错位
Answer：使用overflow:hidden切除多余的部分