为什么这个按钮在 IE9 中显示为蓝色？答案

【问题标题】：Why does this button appear blue in IE9?为什么这个按钮在 IE9 中显示为蓝色？
【发布时间】：2014-08-29 16:33:24
【问题描述】：

我已经在我的班级.btnDeleteCostEstimate button 中指定了覆盖默认背景。在 Chrome 中，它正确显示为浅灰色。但是，在 IE9 中，它显示为深蓝色。

看起来颜色来自 .BPMButton 类的以下属性：

background-color: rgb(27, 117, 188)

谁能告诉我如何使按钮在 IE9 中的显示方式与在 Chrome 中的显示方式相同？

这是屏幕截图，如您所见，IE9 中存在深蓝色渐变效果，而预期的渐变为浅灰色（如 Chrome 所示）：

【问题讨论】：

【解决方案1】：

问题是，我将颜色指定为：

background-image: linear-gradient(bottom, #555 0%, #999 100%);

其中，IE9 解释为：

background-image: linear-gradient(bottom, #000555 0%, #000999 100%);

然而，谷歌浏览器将其解释为（正确）：

background-image: linear-gradient(bottom, #555555 0%, #999999 100%);

所以，要修复它，我只需要更改它，它就可以在两种浏览器中使用：

background-image: linear-gradient(bottom, #555555 0%, #999999 100%);

下面是现在在两种浏览器中都可以使用的示例：http://jsfiddle.net/8DL3q/11/

【讨论】：

【解决方案2】：

因为 IE9 不支持 CSS 渐变 - 请参阅 caniuse。如果你想使用渐变，你可以使用colorzilla

【讨论】：

colorzilla 实际上帮我找到了答案。一旦我输入 #555 我意识到它正在将它转换为 #000555 这正是 IE9 正在做的事情。为了解决这个问题，我刚刚指定了完整的十六进制值 #555555（根据我下面的回答）。感谢您的帮助。

【解决方案3】：

尝试将背景颜色（第 4 行）更改为另一种颜色。
（更改background-color: #1b75bc;）。
代码中没有其他地方引用了该颜色 (#1B75BC)。

在第 25 行你有 background-image: -ms-linear-gradient(bottom, #124B80 0%, #1B76BC 100%);
IE9 不支持渐变：(Gradients in Internet Explorer 9)

【讨论】：