说在前面的话：
新手，项目不知道怎么进行技术选型，直接使用了html+css+js，
外加bootstrap,layui库,jquery，与后端使用ajax,
首页由另一位前端进行编写，使用vue.min.js，外加axios.min.js
由于最近需要进行兼容性测试，主要测试ie9+和360，
360可以直接使用下面语句指定使用chrome内核
<meta name="renderer" content="webkit">
ie下该项目主要不可兼容的地方有以下几点：
1. css中 使用id或者class类型设置content属性无效，图如下：
<!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-平台入口-蓝.png');
background-color: white;
}
li::before {
content: url('./icon-平台入口-白.png');
}
.before {
content: url('./icon-平台入口-白.png');
}
#img1 {
content: url('./icon-平台入口-白.png');
}
</style>
</head>
<body>
<img src="./icon-平台入口-白.png">
<img src="./icon-平台入口-蓝.png" class="before">
<img src="#" class="before">
<img src="#" id="img1">
<li>li::before属性设置content</li>
<li class="before">用class设置content</li>
</body>
</html>
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函数拼装，复杂的...暂时不够清楚），
<div id="my-header">
</div>
<script>
/*jquery引入组件header*/
$('#my-header').load('../header.html', function () {})
</script>
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........努力拓展，寻找动力，上好马达，加油！
网友评论