项目兼容ie8技术要点

好久没有写博客了，因为最近公司项目要调ie8兼容，一直在忙这事，终于竣工了，跟大家分享下这老掉牙的浏览器是如何搞定的。。。欢迎大家指教

项目是使用的jeecg框架，后台使用的java,前端页面使用了bootStrap,jquery,easyui框架，页面是jsp+less+js，还用到了好多html5的新标记以及CSS3的新属性以及媒体查询。由于当时做项目时没有考虑ie8，所以改的过程中遇到了好多好多问题。刚拿到项目时谷歌运行没有问题，ie8一片惨白，不光没有样式，连字都没有。。。没有最惨只有更惨。不说废话了，上干货

1.jquery

项目之前所用的jquery为2.1.4版本，不兼容ie8(jquery2.0+都不兼容ie8)，将所有页面jquery均换成1.10.2版本。

2.bootstrap

项目所使用的bootstrap是3.3.4版本的，为了兼容ie8做了如下设置

a.将jsp页面加上了

b.设置元标签

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

c.使用reponse.js使得支持媒体查询

d.使用html5shiv.min.js使ie8支持html5新特性，注意：使用这个js后所有的html5新结构标记均变为行内元素，需要手动设置display:block;

这样设置后不仅支持了bootstrap还使得ie8兼容html5和媒体查询。

3.less

之前使用的less是直接引入的less文件，并且引入less.js进行编译。但是less.js在ie8不能用，会报错。所以还是稳妥点，直接使用的css文件。我是通过在线less转css编译器转的。

这样基本样式就差不多都出来了。

4.iframe

这个iframe之前给的height是百分比，但是ie8不支持iframe的高为百分比的写法。网上推荐了好多js设置高度的方法，我闲麻烦，写了个CSS,解决了这个问题

 

iframe {
	width: 100%;
	height:100%;
	display: block;
	position: absolute;
}

5.弹性布局问题

 

由于之前没有考虑ie8，使用了大量的弹性布局，这回可惨了，没有简单办法，只能重写。

弹性布局新老版本共三种，最新的display:flex;兼容ie 10+；过渡版本和老版本(box)都不兼容ie8.。。所以放弃吧，重新写布局好了。虽然弹性布局好用，但做项目一定要慎用flex

6.做项目遇见的最大的坑，这个坑不愿别人，自己挖的自己跳。<哭泣>

所有的都设置好了，页面就只有一小条，找了好久才找到问题。之前写代码马虎，

少些了一半。智能伟大的谷歌没问题，到ie8这就惨了，就是不显示。找了好久，所以，写代码一定要认真些啦。

7.CSS3

CSS3的新属性和新选择器ie8是不支持的，解决办法换选择器呗，不行就给个id/class啥的，新属性不支持查资料说是引入PIE.htc的一个包，这个包有坑，我就没有使用。能用滤镜的就用的滤镜。用不了的就选择优雅降级啦。

8.CSS hack

还有最有一点，就是一定不要修改原文件代码，将所有新的需要给ie单独写的代码写到新文件中，然后通过头部注释引用

用到的差不多就这么多了，想到了我会继续补充的。