关于前端:elbutton在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>