css - 过滤器 : progid:DXImageTransform. Microsoft.gradient CSS 属性在 IE 中不起作用

Question

我正在为我们的导航栏使用 Twitter 的 bootstrap CSS 片段。自然地，一切在 Chrome 和 Firefox 中看起来都很棒，但在 IE 中完全是垃圾。我很困惑，因为他们在 IE 中有适合渐变的 css 过滤器命令，并且在做了一些研究之后，我发现 IE 偶尔会遇到颜色代码不是 3 位十六进制的问题，所以我改变了一切并仍然有同样的问题。

这里是渐变的样子

Chrome

和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);
}

Answer 1

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

附言。试试IE10。但是摆脱 -ms-linear-gradient 因为它从来不存在，因为他们直接进入 linear-gradient。