过滤器：progid:DXImageTransform.Microsoft.gradient CSS 属性在 IE 中不起作用答案

【问题标题】：filter: progid:DXImageTransform.Microsoft.gradient CSS property not working in IE过滤器：progid:DXImageTransform.Microsoft.gradient CSS 属性在 IE 中不起作用
【发布时间】：2013-04-23 23:50:53
【问题描述】：

我正在为我们的导航栏使用 twitter 的 bootstrap css。当然，在 Chrome 和 Firefox 中一切看起来都很棒，但在 IE 中完全是废话。我很困惑，因为他们在 IE 中对渐变有正确的 css 过滤器命令，并且在做了一些研究后，我发现 IE 偶尔会出现颜色代码不是 3 位十六进制的问题，所以我改变了一切仍然有同样的问题。

下面是渐变的样子

铬

和IE

这里是 CSS

.navbar-inner {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #36C;
  background-image: -moz-linear-gradient(top,       #33C, #69C);
  background-image: -ms-linear-gradient(top,    #33C, #69C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #33C), to(#69C));
  background-image: -webkit-linear-gradient(top,    #33C, #69C);
  background-image: -o-linear-gradient(top,     #33C, #69C);
  background-image: linear-gradient(top,    #33C, #69C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='    #33C', endColorstr='#69C', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.btn-navbar {
  display: none;
  float: right;
  padding: 7px 10px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #36C;
  background-image: -moz-linear-gradient(top,   #33C, #66C);
  background-image: -ms-linear-gradient(top,    #33C, #66C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #33C), to(#66C));
  background-image: -webkit-linear-gradient(top,    #33C, #66C);
  background-image: -o-linear-gradient(top,     #33C, #66C);
  background-image: linear-gradient(top,    #33C, #66C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='    #33C', endColorstr='#66C', GradientType=0);
  border-color: #66C #66C #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}

【问题讨论】：

标签： css internet-explorer twitter-bootstrap

【解决方案1】：

我相信渐变滤镜需要完整的#AARRGGBB 颜色代码。只是#33C 不行。请改用#003333CC。如果结果是透明的，请尝试#7F3333CC - 我永远不记得它是哪条路了。

PS。试试IE10。但是请摆脱-ms-linear-gradient，因为自从他们直接访问linear-gradient 以来，它就从未存在过。

【讨论】：

不幸的是，这并没有改变 IE 中的渐变（仍然是相同的显示和屏幕截图）。然而，它确实让 Chrome 中的渐变消失了，所以它只是一种纯色。
嗯...好吧，我个人认为这不值得担心 - 完全放弃过滤器并为老 IE 用户使用纯色。此外，您应该将 linear-gradient 规则更改为 linear-gradient(to bottom, #33C, #69C)
filter 正在成为一个实际属性，只是具有实际有意义的值，而不是 DXImageTransform 废话。所以这可能就是你的渐变在那里消失的原因。