边缘的CSS问题答案

【问题标题】：CSS issue with edge边缘的CSS问题
【发布时间】：2021-01-09 17:24:48
【问题描述】：

.background-red {
    background-color: #ff6767d4;
}

在 Microsoft Edge（不是 Chromium 版本）上，此颜色未正确呈现。如何使用 CSS 来使用以下 IF it's Edge

.background-red {
    background-color: red;
}

【问题讨论】：

标签： html css

【解决方案1】：

基于this 答案和caniuseit table IE 不支持带有 alpha 通道的十六进制值。这就是它忽略整个规则的原因。

要应用无效值，您必须为其设置回退。 注意顺序 - 当遇到无效值时，浏览器将使用最后一个已知规则。

.background-red {
    background-color: rgba(255, 103, 103, .83);
    background-color: #ff6767d4;
}

【讨论】：

【解决方案2】：

你只要写：

.background-red {
    background-color: red;
    background-color: #ff6767d4;
}

将使用最后的工作值。如果浏览器不理解某个值，它将回退到它理解的最后一个值。

编辑：你也可以使用rgba() 来定义你的颜色，据我所知edge支持这种格式。

【讨论】：