el-button在chrome低版本(<88)中显示异常的问题
问题现象
浏览器:Chrome 87
问题原因
el-button使用的:not(xxx,xxx,xxx)
,以逗号分隔的选择器列表作为参数是实验性的,尚未获得广泛支持
浏览器支持情况如下:
解决方法
修改 element-plus/dist/index.css
对应的代码
原代码
<style>
.el-button:not(.is-text, .is-link, .el-button--text):focus,
.el-button:not(.is-text, .is-link, .el-button--text):hover {
color: var(--el-button-hover-text-color);
border-color: var(--el-button-hover-border-color);
background-color: var(--el-button-hover-bg-color);
outline: 0
}
.el-button:not(.is-text, .is-link, .el-button--text):active {
color: var(--el-button-active-text-color);
border-color: var(--el-button-active-border-color);
background-color: var(--el-button-active-bg-color);
outline: 0
}
.el-button:not(.is-text, .is-link, .el-button--text):focus-visible {
border-color: transparent;
outline: 2px solid var(--el-button-border-color);
outline-offset: 1px
}
<style>
对应修改为:
<style>
.el-button:not(.is-text),.el-button:not(.is-link),.el-button:not(.el-button--text) {
background-color: var(--el-button-bg-color);
border: var(--el-border);
border-color: var(--el-button-border-color)
}
.el-button:not(.is-text):focus,.el-button:not(.is-link):focus,.el-button:not(.el-button--text):focus,
.el-button:not(.is-text):hover,.el-button:not(.is-link):hover,.el-button:not(.el-button--text):hover {
color: var(--el-button-hover-text-color);
border-color: var(--el-button-hover-border-color);
background-color: var(--el-button-hover-bg-color);
outline: 0
}
.el-button:not(.is-text):active,.el-button:not(.is-link):active,.el-button:not(.el-button--text):active {
color: var(--el-button-active-text-color);
border-color: var(--el-button-active-border-color);
background-color: var(--el-button-active-bg-color);
outline: 0
}
el-button:not(.is-text):focus-visible,.el-button:not(.is-link):focus-visible,.el-button:not(.el-button--text):focus-visible {
border-color: transparent;
outline: 2px solid var(--el-button-border-color);
outline-offset: 1px
}
</style>
转载自:https://segmentfault.com/a/1190000042479459