前面碎碎念
真是不搞页面,不知道弄兼容如此的恶心.当然你一板一眼的写,能避免很多的麻烦,可是利用框架,插件来做,这是烦的要死了.
这次利用了 yoesman+gulp+bower 快速搭建了个项目 其中还用到swiper插件 这个插件 3代主要面对手机 可是有些新特性 2代还没有 真是麻烦 用了3代 兼容性就有麻烦了.
基本解决问题
bower里有个很好的插件 bootstrap-ie8 bower install --save bootstrap-ie8 安装好后 他能帮你解决大多数的兼容问题
细微修改
IE 9 不兼容 classList 这个属性 所以需要如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| if (!("classList" in document.documentElement)) {
window.HTMLElement = window.HTMLElement || Element;
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/g),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
}
return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/g).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/g)[i] || null;
}
};
}
});
}
</script>
|
IE 8 不兼容 window.HTMLElement 所以第一行还得加上这一句 IE浏览器也真是够够的了
1
2
|
window.HTMLElement = window.HTMLElement || Element;
|
