共计 1803 个字符，预计需要花费 5 分钟才能阅读完成。
问题景象
浏览器：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>
正文完
