汕头文明网整理-兼容ie8

项目准备

当开始准备搭建一个项目时，要知道需要兼容到什么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以下就用低版本插件

布局

要的效果是传统的中间固定，两边自适应。所以只要把容器固定好宽度然后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结束颜色/

整理给健忘的我。