說(shuō)在前面的話：
新手，項(xiàng)目不知道怎么進(jìn)行技術(shù)選型撞反，直接使用了html+css+js，
外加bootstrap,layui庫(kù),jquery，與后端使用ajax,
首頁(yè)由另一位前端進(jìn)行編寫(xiě)茄螃，使用vue.min.js，外加axios.min.js
由于最近需要進(jìn)行兼容性測(cè)試连锯，主要測(cè)試ie9+和360归苍，
360可以直接使用下面語(yǔ)句指定使用chrome內(nèi)核
<meta name="renderer" content="webkit">
ie下該項(xiàng)目主要不可兼容的地方有以下幾點(diǎn)：
1. css中 使用id或者class類(lèi)型設(shè)置content屬性無(wú)效，圖如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
color: white;
}
img:hover {
content: url('./icon-平臺(tái)入口-藍(lán).png');
background-color: white;
}
li::before {
content: url('./icon-平臺(tái)入口-白.png');
}
.before {
content: url('./icon-平臺(tái)入口-白.png');
}
#img1 {
content: url('./icon-平臺(tái)入口-白.png');
}
</style>
</head>
<body>
<img src="./icon-平臺(tái)入口-白.png">
<img src="./icon-平臺(tái)入口-藍(lán).png" class="before">
<img src="#" class="before">
<img src="#" id="img1">
<li>li::before屬性設(shè)置content</li>
<li class="before">用class設(shè)置content</li>
</body>
</html>
解決方法：
綁定status來(lái)改變img的src屬性
2.使用video.js來(lái)播放运怖，ie下報(bào)錯(cuò)
圖中可知找不到Unit8Array
解決方法：
Uint8Array ie9及以下兼容問(wèn)題
polyfill
shim和polyfill有什么區(qū)別
摘：（再次理解polyfill的概念）
一個(gè)shim是一個(gè)庫(kù),它將一個(gè)新的API引入到一個(gè)舊的環(huán)境中,而且僅靠舊環(huán)境中已有的手段實(shí)現(xiàn) 一個(gè)polyfill就是一個(gè)用在瀏覽器API上的shim拼弃。
我們通常的做法是先檢查當(dāng)前瀏覽器是否支持某個(gè)API,如果不支持的話就加載對(duì)應(yīng)的polyfill.然后新舊瀏覽器就都可以使用這個(gè)API了。
3.css 中filter屬性來(lái)改變圖片的顏色摇展，ie不支持filter
解決辦法同1
4.css 中flex布局支持ie10+吻氧，ie9下不支持
解決方案：
在原來(lái)的基礎(chǔ)上疊加，由于flex布局使用之后float等失效 >>>>>
利用float浮動(dòng)來(lái)疊加咏连，margin: 0 auto來(lái)代替盯孙，text-align: center設(shè)置文本居中，position設(shè)置相對(duì)定位來(lái)設(shè)置元素的布局（用于一行3列的排布）祟滴，
另外振惰，其實(shí)可以使用bootstrap或者element-ui的流式布局（柵格化）來(lái)重新實(shí)現(xiàn)。等很多方式垄懂。
5.在ie9中省略號(hào)的設(shè)置
單行-設(shè)置通用：
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
多行-沒(méi)有找到很好的辦法：
/* 統(tǒng)一字體的高度和行高报账，以及寬度，超出則隱藏埠偿，從而保證顯示效果一致 */
height: 2rem;
line-height: 2rem;
width: 100%;
overflow: hidden;
6. ie9中l(wèi)i標(biāo)簽的默認(rèn)list-style:disc的點(diǎn)顯示不出來(lái)
/* 兼容ie透罢，li標(biāo)簽設(shè)置 */
list-style-position: inside;
7.html引入vue，兼容ie
如果代碼是es6規(guī)范編寫(xiě)冠蒋，需要使用babel來(lái)引入羽圃，
或者在https://www.babeljs.cn/repl轉(zhuǎn)換成es5
8.ie下通過(guò)url中文路徑傳參的問(wèn)題
需要使用encodeURI轉(zhuǎn)換
window.open('./videoshowDetails.html?id=' + String(data.guid) + '&name=' + encodeURI(data.title) + ','_self')
ps>新手一枚的痛，
1.在項(xiàng)目中需要考慮ajax請(qǐng)求路徑以及圖片路徑抖剿，這些參數(shù)基本都有一個(gè)全局的請(qǐng)求頭朽寞，需要共享,
另外可以對(duì)一些cookie存取、localstorage存取斩郎、路徑傳參脑融、ajax請(qǐng)求、字符串處理（當(dāng)前的時(shí)間格式化）等函數(shù)進(jìn)行模塊化編寫(xiě)缩宜，下次可以直接引入使用
2.相似頁(yè)面的搭建肘迎，可以使用組件來(lái)（簡(jiǎn)單可以使用jQuery的load函數(shù)拼裝甥温，復(fù)雜的...暫時(shí)不夠清楚），
<div id="my-header">
</div>
<script>
/*jquery引入組件header*/
$('#my-header').load('../header.html', function () {})
</script>
3.css可以進(jìn)行一些全局的封裝妓布，考慮好封裝性和復(fù)用的便利姻蚓，可以設(shè)置一些沒(méi)有語(yǔ)義的class，最近第一次知道css其實(shí)可以自定義變量
換膚的小測(cè)試方法探索
/*css*/
:root {
--hover-color: skyblue;
}
.layui-layout-admin .layui-logo {
color: var(--hover-color);
}
// javascript
let root = document.documentElement;
root.style.setProperty('--hover-color', 'red');
可以多學(xué)習(xí)less匣沼、sass狰挡、stylus
等等，可以幫助快速編寫(xiě)释涛，非常有利于開(kāi)發(fā)的規(guī)范性加叁，提升開(kāi)發(fā)的效率和質(zhì)量
即主要思考模塊化和組件化（html, css, js），方便復(fù)用
4........努力拓展唇撬，尋找動(dòng)力它匕，上好馬達(dá)，加油局荚！
