我使用混色来获取按钮的背景色(通过自定义属性设置)，并使其在悬停时变得更亮.我本以为不支持混色的浏览器会忽略悬停状态，使用非悬停背景色，但按钮在悬停时变成了透明.我在悬停状态样式中添加了明确的后备背景色，但这没有任何效果:
.button {
background: var(--buttonColor);
&:hover, &:focus {
background-color: var(--buttonColor);
background-color: color-mix(in srgb, var(--buttonColor) 80%, white);
}
}
在try 了多种变种之后，问题似乎是在COLOR-MIX()中使用自定义属性会让不支持COLOR-MIX()的浏览器认为它们支持COLOR-MIX()，而他们解释它的失败try 会导致背景 colored颜色 变得透明(通过查看在开发工具中使用/丢弃了哪些规则来发现).正因为如此，我的后备在需要它的浏览器中被忽略了.
另外，同样的问题也发生在边框 colored颜色 上，尽管这是默认为白色而不是透明的.
在写下大部分内容后，我意识到我可以通过在@supports (background-color: color-mix(in srgb, black 50%, white))内包装我的混色来解决这个问题，但我还是决定把它贴出来，希望能:
- 它帮助了其他正在与同样的事情作斗争的人，而且
- 有人可以解释一下为什么会发生这种情况，这样我就能在future 了解根本问题