最近在做项目，要求兼容主流浏览器之外，还得兼容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这种双核浏览器默认用极速模式打开页面。
<!--[if lt IE 9]><![endif]-->这种写法是让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。
如有新的发现会持续更新，欢迎大家补充，一起学习。。。
扫一扫
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
