# 兼容性总结
- 记录遇到过的浏览器兼容性问题
# Svg-icon
- svg-icon如果用过vue-element-admin这个项目，那应该都会到这个问题
- svg-icon其实是使用了svg中的use标签的:href
// html部分
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :href="iconName" />
</svg>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
- 但是safari浏览器在12.1版本之前都不支持这个svg中use标签的href属性
- 所以整体图标全部换成了iconfont的字体图标
- 后面发现这个有人提这个issues，被修复了
- 将原来的use的href属性替换成xlink:href
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
- <use :href="iconName" />
+ <use :xlink:href="iconName" />
</svg>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 移动端拍照上传图片
android加capture属性，可以直接打开照相机IOS加capture属性，可以直接打开照相机- 这两个端刚好相反，所以要做一些特殊的处理
<input type="file" capture="camera" accept="image/*">
1
var file = document.querySelector('input');
if (getIos()) {
file.removeAttribute("capture");
}
function getIos() {
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
return true;
} else {
return false;
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11