兼容ie8_兼容IE8的一些笔记

最近在做项目，要求兼容主流浏览器之外，还得兼容win7的IE8版本，因为很多客户还是老式win7电脑，甚至还有XP系统的，突然一口老血吐出。。。

好了，话不多说，上点自己平时踩坑后的一些心得。

一、框架选取

因为要兼容IE8，所以选框架的时候就排除了vue、react、angular这些MVVM框架。

最终选择了国内很好用的Layui框架（数据表格、弹窗、日历等），还有就是Jquery（1.11.1版本），别选高于2.0版本就行，高版本Jquery不兼容IE8了。

老码农都知道JQ很好用，开发的时候一点都不怂，拿到JQ就是干。

pass：以前面试了一个新码农，不会用JQ，只会vue，我表示理解，毕竟现在很多公司都不用考虑兼容了，但是不会JQ这个说不过去，毕竟DOM操作还是要会的。

二、代码部分

1、html部分

X-UA-Compatible和renderer的设置，可以让360这种双核浏览器默认用极速模式打开页面。

这种写法是让IE9以下的浏览器引入对应的js，其中html5shiv是让H5标签可以得到支持，respond是让IE8支持css3媒体查询写法@media。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"><meta name="renderer" content="webkit"><title>项目</title><!--[if lt IE 9]><script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body></body>
</html>

2、css部分

css写法尽量古老一点，不要用css3的属性去布局宽高这些，不然到了IE8就全乱了，像圆角，阴影，transition这些还是可以用的，毕竟用了页面也不会乱，只是到了IE8没那么好看了而已。

横向排列布局用float: left，尽量别使用display: inline-block。

css选择器使用first-child，别使用last-child。

opacity: 0.5; filter: alpha(opacity=50);

当然css也可以针对IE8单独写hack。

background: gray; /* 基本的 */
background: pink9; /* IE 8 及低于IE8版本 */
*background: green; /* IE 7 及低于IE7版本 */
_background: blue; /* IE 6 */

3、js部分

用Jquery操作dom是完全不用担心兼容问题的，数据交互可以用 $.ajax()。

然而，到了处理数据的时候，问题就来了，很多ES6很好用的方法不能用了。

同样，js写法尽量古老一点，像 forEach()、filter()、map() 这些就别用了，用我们古老的 for(){} 循环处理数据，推荐使用 jquery 的 $.each()，不管是循环 json，还是循环数组都很好用。

4、IE8注意事项

不支持localStorage sessionStorage，可以用document.cookie。

不支持addEventListener，可以用attachEvent。

input不支持placeholder，可以用jquery.placeholder.js。

css不支持user-select，可以在标签使用onselectstart="return false;"。

好了，先分享到这里，像Layui在IE8里面也是有很多坑的，在这里就不说框架了，有空会另开一个文章写Layui。

如有新的发现会持续更新，欢迎大家补充，一起学习。。。