最近遇到的兼容性问题和适配问题
最近遇到的兼容性问题和适配问题
JS：
IE：
1、不能添加监听标准事件，添加polyfill
initEvent: function initEvent(dom, eventName, callback) {
if (!dom || !eventName || !callback) return;
if (document.addEventListener) { // 一般浏览器
dom.addEventListener(eventName, callback, false);
} else if (document.attachEvent) { // IE
dom.attachEvent('on' + eventName, callback);
} else {
dom['on' + eventName] = callback;
}
},2、不支持classlist，添加polyfill模拟jquery
addClass: function addClass(dom, className) {
if (!dom) return;
if (this.hasClass(dom, className)) return;
dom.className = dom.className + ' ' + className;
},
removeClass: function removeClass(dom, className) {
if (!dom) return;
dom.className = dom.className.replace(' ' + className, '');
dom.className = dom.className.replace(className, '');
},
hasClass: function hasClass(dom, className) {
return dom.className.match(' ' + className) || dom.className.match(className);
},
toggleClass: function toggleClass(dom, className) {
if (this.hasClass(dom, className)) {
this.removeClass(dom, className);
} else {
this.addClass(dom, className);
}
},3、不支持HTML5新标签，引入HTML5SHIV
<script src="./static/html5shiv.min.js"></script>CSS：
IE：
1、IE7及以下display: inline-block表现异常，div设置为inline-block显示为block：
解决方法：
display: inline-block;
/* IE7及以下的Polyfill */
display: inline-block;
*zoom: 1;
*display: inline;原理：IE7及以下识能别到 *[属性key]，利用IE7中inline-block表现为block可以设置宽高，然后利用*zoom触发重排，利用*display覆盖block
2、IE8及以下不支持background-size：
解决方法：
padding-bottom: 36.7630492%;
background: url('../../static/images/home_one@1x.png') no-repeat center;
background-size: 100% 100%;
/* IE8 background-size Hack */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../../static/images/home_one@1x.png',
sizingMethod='scale');原理：利用IE中的过滤器对象处理，会有轻微闪烁问题。
3、IE10、IE11、IE edge中 flex + min-height 导致高度丢失
解决方法： 参考 solved-by-flexbox ：https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
.root {
min-width: 960px;
min-height: 100vh;
display: flex;
flex-direction: column;
height: 100%; /* 在min-height之外用100%高度， 利用content撑开*/
}
.header-back {
flex: none; /* 固定 */
display: block;
width: 100%;
height: 64px;
}
.content {
flex: 1 0 auto; /* 弹性 */
margin: 15px auto;
width: 100%;
max-width: 1266px;
}
.footer {
flex: none; /* 固定 */
display: block;
width: 100%;
height: 60px;
}Safari：
1、Safari中min-width: unset无效：
解决方法：
min-width: 900px;
...
@media screen and (max-width: $min-width) {
min-width: unset;
...
}
/* 改为不会生效的值0px */
min-width: 900px;
...
@media screen and (max-width: $min-width) {
min-width: 0px;
...
}原理：IE7中和Android4.3版本也不支持unset，但是会当做无效值覆盖之前的min-width，而在Safari5中，会当做无效的代码，元素会保持原来的min-width。
2、IOS9中光标定位问题：
在Vue2.4版本以下，nextTick实现是以MO和Promise为优先的策略，（MO和Promise都为MicroTask，优先执行）
当一个input值改变事件如有有Watcher监听，并且在Watcher触发了另外的DOM元素重绘，多次重绘会导致input框的渲染不生效
解决方法：
1、把可能影响DOM的渲染domtask放入下一个MacroTask，这样就会等到input渲染完毕再执行domtask
2、升级Vue至最新版本，最新版本中nextTick在WacherDOM的onXXX事件时，优先以MacroTask执行
watcher: {
inputValue(){
// ...
setTimeout(() => {
// 其他可能影响DOM渲染的task，比如
// this.showFlag = false;
}, 0);
// ...
},
}Android Browser：
1、Android4.3下不支持 vw宽度：
解决方法：
position: absolute;
right: 0;
top: 0;
width: 100%;原理：将父元素100%宽度，子元素绝对定位，宽度100%
腾讯云开发者
