兼容ie9

说在前面的话：
新手，项目不知道怎么进行技术选型，直接使用了html+css+js，
外加bootstrap,layui库,jquery，与后端使用ajax,
首页由另一位前端进行编写，使用vue.min.js，外加axios.min.js
由于最近需要进行兼容性测试，主要测试ie9+和360，

360可以直接使用下面语句指定使用chrome内核

ie下该项目主要不可兼容的地方有以下几点：

ie工具控制台错误消息

1. css中 使用id或者class类型设置content属性无效，图如下：

    
    
    
    



    
    
    
    
    
li::before属性设置content
    
用class设置content

ie中id和class属性设置content属性

解决方法：

绑定status来改变img的src属性

使用vue数据绑定status

2.使用video.js来播放，ie下报错

图中可知找不到Unit8Array

报错

解决方法：

Uint8Array ie9及以下兼容问题
polyfill
shim和polyfill有什么区别

摘：（再次理解polyfill的概念）
一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现 一个polyfill就是一个用在浏览器API上的shim。
我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了。

3.css 中filter属性来改变图片的颜色，ie不支持filter

解决办法同1

4.css 中flex布局支持ie10+，ie9下不支持

解决方案：

在原来的基础上叠加，由于flex布局使用之后float等失效 >>>>>
利用float浮动来叠加，margin: 0 auto来代替，text-align: center设置文本居中，position设置相对定位来设置元素的布局（用于一行3列的排布），

另外，其实可以使用bootstrap或者element-ui的流式布局（栅格化）来重新实现。等很多方式。

5.在ie9中省略号的设置

单行-设置通用：

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

多行-没有找到很好的办法：

   /* 统一字体的高度和行高，以及宽度，超出则隐藏，从而保证显示效果一致 */
  height: 2rem;
  line-height: 2rem;
  width: 100%;
  overflow: hidden;

6. ie9中li标签的默认list-style:disc的点显示不出来

显示样式问题

/* 兼容ie，li标签设置 */  
list-style-position: inside;

7.html引入vue，兼容ie

跳转

如果代码是es6规范编写，需要使用babel来引入，
或者在https://www.babeljs.cn/repl转换成es5

8.ie下通过url中文路径传参的问题

需要使用encodeURI转换

window.open('./videoshowDetails.html?id=' + String(data.guid) + '&name=' + encodeURI(data.title) + ','_self')

ps>新手一枚的痛，

1.在项目中需要考虑ajax请求路径以及图片路径，这些参数基本都有一个全局的请求头，需要共享,
另外可以对一些cookie存取、localstorage存取、路径传参、ajax请求、字符串处理（当前的时间格式化）等函数进行模块化编写，下次可以直接引入使用
2.相似页面的搭建，可以使用组件来（简单可以使用jQuery的load函数拼装，复杂的...暂时不够清楚），

3.css可以进行一些全局的封装，考虑好封装性和复用的便利，可以设置一些没有语义的class，最近第一次知道css其实可以自定义变量
换肤的小测试方法探索

/*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');

可以多学习less、sass、stylus
等等，可以帮助快速编写，非常有利于开发的规范性，提升开发的效率和质量

即主要思考模块化和组件化（html, css, js），方便复用

4........努力拓展，寻找动力，上好马达，加油！