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切除多余的部分