el-button在chrome低版本(<88)中显示异常的问题
1、问题内容：el-button 按钮显示灰色背景色和边框。【浏览器版本：chrome 75】
2、问题原因：el-button使用的:not(xxx,xxx,xxx)，以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持
1 .el-button:not(.is-text, .is-link, .el-button--text) { 2 background-color: var(--el-button-bg-color); 3 border: var(--el-border); 4 border-color: var(--el-button-border-color); 5 }
3、浏览器支持情况如下：
4、解决方案：修改 element-plus/dist/index.css 对应的代码
- 源代码
1 .el-button:not(.is-text, .is-link, .el-button--text):focus, 2 .el-button:not(.is-text, .is-link, .el-button--text):hover { 3 color: var(--el-button-hover-text-color); 4 border-color: var(--el-button-hover-border-color); 5 background-color: var(--el-button-hover-bg-color); 6 outline: 0 7 } 8 9 .el-button:not(.is-text, .is-link, .el-button--text):active { 10 color: var(--el-button-active-text-color); 11 border-color: var(--el-button-active-border-color); 12 background-color: var(--el-button-active-bg-color); 13 outline: 0 14 } 15 16 .el-button:not(.is-text, .is-link, .el-button--text):focus-visible { 17 border-color: transparent; 18 outline: 2px solid var(--el-button-border-color); 19 outline-offset: 1px 20 }
- 修改后代码
1 .el-button:not(.is-text),.el-button:not(.is-link),.el-button:not(.el-button--text) { 2 background-color: var(--el-button-bg-color); 3 border: var(--el-border); 4 border-color: var(--el-button-border-color) 5 } 6 7 .el-button:not(.is-text):focus,.el-button:not(.is-link):focus,.el-button:not(.el-button--text):focus, 8 .el-button:not(.is-text):hover,.el-button:not(.is-link):hover,.el-button:not(.el-button--text):hover { 9 color: var(--el-button-hover-text-color); 10 border-color: var(--el-button-hover-border-color); 11 background-color: var(--el-button-hover-bg-color); 12 outline: 0 13 } 14 15 .el-button:not(.is-text):active,.el-button:not(.is-link):active,.el-button:not(.el-button--text):active { 16 color: var(--el-button-active-text-color); 17 border-color: var(--el-button-active-border-color); 18 background-color: var(--el-button-active-bg-color); 19 outline: 0 20 } 21 22 el-button:not(.is-text):focus-visible,.el-button:not(.is-link):focus-visible,.el-button:not(.el-button--text):focus-visible { 23 border-color: transparent; 24 outline: 2px solid var(--el-button-border-color); 25 outline-offset: 1px 26 }
