likes
comments
collection
share

el-button在chrome低版本(<88)中显示异常的问题

作者站长头像
站长
· 阅读数 44

问题现象

el-button在chrome低版本(<88)中显示异常的问题浏览器:Chrome 87

问题原因

el-button在chrome低版本(<88)中显示异常的问题el-button使用的:not(xxx,xxx,xxx),以逗号分隔的选择器列表作为参数是实验性的,尚未获得广泛支持

浏览器支持情况如下:el-button在chrome低版本(<88)中显示异常的问题

解决方法

修改 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>