一:伪类元素selection:为选中文字添加样式,默认不会支持火狐,需要加火狐前缀-moz-,如:
p::selection {}
二:w3c标准规定在页面里每个元素都有一个属性叫block formatting context,简称BFC,默认是关闭状态,
开启BFC,有如下特点:
1:相邻元素的垂直外边距不会重叠
2:开启BFC的元素不会被浮动元素覆盖
3:开启BFC的父元素可以包含浮动的子元素,不存在父元素高度塌陷问题。
如何开启BFC:
1:添加浮动
2:绝对定位
3:设置元素为inline-block
4:设置overflow为非visible
所以解决父元素高度塌陷问题的一种方案是:
overflow:hidden;
但是这个方法不支持ie6,因为ie6没有BFC,对应的有Has layout 属性,
开启Has Layout属性的方法之一是:
zoom: 1;// 意思是将元素放大一倍。
通过伪元素解决父元素高度塌陷:
.clearfix:after {
content: "";
display:block;
clear:both;
}
兼容ie6:
.clearfix{
zoom: 1;
}
同时解决父元素高度塌陷和外面局溢出:
.clearfix:after,
.clearfix:before {
content: "";
display:table;
clear: both;
}
.clearfix{
zoom:1;//兼容ie6;
}
三:ie6不支持固定定位fixed。
四:ie8及以下不支持opecity
为元素设置半透明
opecity: 0.5;
兼容ie8:
filter:alpha(opecity=50);
五:ie6不支持png24图片格式的背景透明(即透明图片在ie6里背景不透明)。
解决:1,将图片格式改为png8,(缺点:清晰度降低)
2:使用DD_belatedPNG.js文件.
六:CSS Hack:有些代码只需要在特定的浏览器(ie)里执行,这时就需要css hack。ie10 及以上不识别CSS Hack。
1:条件hack,
<!--[if IE 6]>
这代码只在ie6里被执行。
<![endif]-->
<!--[if gt IE 6]>
这代码只在高于ie6的浏览器里被执行。
<![endif]-->
<!--[if lt IE 8]>
这代码只在低于ie8的浏览器里被执行。
<![endif]-->
<!--[if lte IE 8]>
这代码只在低于和定于ie8的浏览器里被执行。
<![endif]-->