项目准备
当开始准备搭建一个项目时，要知道需要兼容到什么ie版本，现在老的那些国企电脑有可能还是XP、或者win7。他们大多数用的都是自带的ie 所以基本是要兼容ie8。
所以要准备好用的组件插件。vue基本就不用想了并不适合ie8。
用到的插件
JS插件： JQuery1.11.1.min.js
JQ在2.0开始就不再兼容ie8版本了，所以我用的是jq1.X中高版本了。
UI组件: bootstrap3
其实我在项目中用到bootstrap组件的不多，也是习惯性的用了，用到了分页、面包屑
轮播图组件 ：Swiper2.0
因为有大量轮播图。而且Swiper我用的比较熟悉，相比bootstrap的轮播功能多了很多，并且也兼容了ie8。
兼容ie8的插件：PIE.htc、html5shiv、rem.min.js
PIE.htc 我是用来解决ie8中不能使用CSS3没有border-radius的，后来整理的时候才发现能解决rgba的问题，害我走了很多弯路，功能还挺多有box-shadow、box-radius,线性渐变( linear-gradient)，rgba,box-shadow,border-image。详细可以参考pie.htc的使用
顺便简单说下我的用法
/*border-radius 用法*/
behavior: url(PIE.htc);
position: relative; /*如果没有这个属性，显示不出来*/
border-radius: 15px;
/*rgba*/
-pie-background:rgba(0, 0, 0, 0.5);
behavior: url(PIE.htc);
html5shiv 因为习惯性写了h5的标签，这是个兼容h5语法的插件
rem.js 因为一开始我用的rem去写，而rem也是css3中的属性，ie8也用不了，所以要用到rem.js去做兼容处理。(但是后面发现跟要的不对应，需求要中间固定两边自适应，而rem是全局自适应，一般是用于移动端的，所以后面没有用rem了，作为记录)
要注意的是rem.js要放在后面执行，在你的css加载完之后执行，因为他是对你的css中rem进行换算成px。
IE8的兼容处理
用到了html的判断语法
image.png
如果是ie9以上就直接使用高版本的插件，
ie9以下就用低版本插件
<!--[if lt IE 10]>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="./lib/swiperIE8/idangerous.swiper2.7.6.css">
<script src="./lib/swiperIE8/idangerous.swiper2.7.6.min.js"></script>
<script src="./js/PIE.js"></script>
<link rel="stylesheet" href="./css/indexie8.css">
<![endif]-->
<!--[if gt IE 9]>
<script src="./lib/jqeury/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./lib/swiper/swiper-3.4.2.min.css">
<![endif]-->
布局
要的效果是传统的中间固定，两边自适应。所以只要把容器固定好宽度然后margin:0 auto;就行了。
其他的元素都按设计图给的px去设定就好了，不过记得div之间存在font-size的间隔，记得将父容器的font-size设置为0，这样就不会跨行了。
其他都是按照设计图去写html、css、js了，因为页面上列表信息非常多，用ajax来渲染会很麻烦且多，所以数据部分交给了后端php来渲染，我将静态页面写好交给他。
渐变兼容ie8
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #ff0000, endColorstr = #000000)"; /IE8.0 版本可以识别/
/针对IE6 IE7设置纯色背景色；/
/*+background:#ccc; */
}
/GradientType=0表示从上到下的渐变，GradientType=1表示从左到右的渐变，startColorstr开始颜色，endColorstr结束颜色/
整理给健忘的我。
网友评论