css兼容性

4 篇文章 0 订阅

一:伪类元素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]-->
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值