前言

最近在做快成长的官网,在兼容ie8的时候,发现了一些比较好的处理方式。

兼容CSS3中的处理方式

transform: scale(): 当使用此CSS3属性(一个参数)缩放时,在IE8下使用zoom属性替代。zoom在几年前是IE的私有属性,非标准,如今除了firefox,现代浏览器都能支持了。

1
2
3
4
5
.demo{
zoom: 50%; /*equal to transform:scale(0.5)*/
zoom: 0.5;
zoom: normal; /*equal to zoom: 1*/
}

参考

IE8 通用方法样式覆盖处理

我们知道网上都有说处理IE8的兼容性用到hack写法 “\0” ,但是这种写法虽然能够区分ie8和其他浏览器chrome,firefox,但是ie9,ie10同样适用,这种写法并非ie8 特有的。
一般情况下,我们采取下面的写法,在chrome下应为无法识别“\0”规则,则后面无法覆盖成功,这是我们想要的。但是,ie9+能够正确识别,则产生覆盖的效果,这不是我们想要的。

1
2
3
4
5
.demo{
color: #ddd;
color: #ddd\0; /*for ie8*/
color: #ddd\9; /*for ie6+*/
}

接下来如何实现特有的ie8 hack 写法

1
2
3
4
5
6
.demo{
color: #ddd\0;
}
:root .demo{
color: #fff;
}

这种写法就很好的区分ie8和其他浏览器了,因为ie8能够识别出”\0”写法并且不支持:root (相当于html)这种CSS3选择器的写法(ie8不支持CSS3),且ie9+、chrome、firefox浏览器最终会选择后者“覆盖”前者,皆大欢喜。
参考