IE8兼容笔记

发表于   |   分类于   |  

前言

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

兼容CSS3中的处理方式

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

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浏览器最终会选择后者“覆盖”前者，皆大欢喜。
参考

持续更新中。