項(xiàng)目準(zhǔn)備
當(dāng)開始準(zhǔn)備搭建一個(gè)項(xiàng)目時(shí)，要知道需要兼容到什么ie版本，現(xiàn)在老的那些國企電腦有可能還是XP、或者win7。他們大多數(shù)用的都是自帶的ie 所以基本是要兼容ie8。
所以要準(zhǔn)備好用的組件插件。vue基本就不用想了并不適合ie8。
用到的插件
JS插件： JQuery1.11.1.min.js
JQ在2.0開始就不再兼容ie8版本了，所以我用的是jq1.X中高版本了。
UI組件: bootstrap3
其實(shí)我在項(xiàng)目中用到bootstrap組件的不多，也是習(xí)慣性的用了，用到了分頁、面包屑
輪播圖組件 ：Swiper2.0
因?yàn)橛写罅枯啿D。而且Swiper我用的比較熟悉，相比bootstrap的輪播功能多了很多，并且也兼容了ie8。
兼容ie8的插件：PIE.htc、html5shiv、rem.min.js
PIE.htc 我是用來解決ie8中不能使用CSS3沒有border-radius的，后來整理的時(shí)候才發(fā)現(xiàn)能解決rgba的問題，害我走了很多彎路，功能還挺多有box-shadow、box-radius,線性漸變( linear-gradient)，rgba,box-shadow,border-image。詳細(xì)可以參考pie.htc的使用
順便簡單說下我的用法
/*border-radius 用法*/
behavior: url(PIE.htc);
position: relative; /*如果沒有這個(gè)屬性，顯示不出來*/
border-radius: 15px;
/*rgba*/
-pie-background:rgba(0, 0, 0, 0.5);
behavior: url(PIE.htc);
html5shiv 因?yàn)榱?xí)慣性寫了h5的標(biāo)簽，這是個(gè)兼容h5語法的插件
rem.js 因?yàn)橐婚_始我用的rem去寫，而rem也是css3中的屬性，ie8也用不了，所以要用到rem.js去做兼容處理。(但是后面發(fā)現(xiàn)跟要的不對(duì)應(yīng)，需求要中間固定兩邊自適應(yīng)，而rem是全局自適應(yīng)，一般是用于移動(dòng)端的，所以后面沒有用rem了，作為記錄)
要注意的是rem.js要放在后面執(zhí)行，在你的css加載完之后執(zhí)行，因?yàn)樗菍?duì)你的css中rem進(jìn)行換算成px。
IE8的兼容處理
用到了html的判斷語法
如果是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]-->
布局
要的效果是傳統(tǒng)的中間固定，兩邊自適應(yīng)。所以只要把容器固定好寬度然后margin:0 auto;就行了。
其他的元素都按設(shè)計(jì)圖給的px去設(shè)定就好了，不過記得div之間存在font-size的間隔，記得將父容器的font-size設(shè)置為0，這樣就不會(huì)跨行了。
其他都是按照設(shè)計(jì)圖去寫html、css、js了，因?yàn)轫撁嫔狭斜硇畔⒎浅６?，用ajax來渲染會(huì)很麻煩且多，所以數(shù)據(jù)部分交給了后端php來渲染，我將靜態(tài)頁面寫好交給他。
漸變兼容ie8
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #ff0000, endColorstr = #000000)"; /IE8.0 版本可以識(shí)別/
/針對(duì)IE6 IE7設(shè)置純色背景色；/
/*+background:#ccc; */
}
/GradientType=0表示從上到下的漸變，GradientType=1表示從左到右的漸變，startColorstr開始顏色，endColorstr結(jié)束顏色/
整理給健忘的我。
