为什么在 IE 上显示不同的渐变颜色，但在 Firefox 和 chrome 上完美运行？答案

【问题标题】：Why Displaying different gradient color on IE but works perfectly on firefox and chrome?为什么在 IE 上显示不同的渐变颜色，但在 Firefox 和 chrome 上完美运行？
【发布时间】：2015-11-26 12:41:00
【问题描述】：

我正在从事其中一个开源项目。我面临一个奇怪的问题。当我在 Firefox 或 Chrome 上打开网站时，它会显示我期望的颜色，但在 IE 上它不会以那种颜色显示（它显示非常浅的颜色）。我的猜测是，这是因为我使用的渐变导致 IE 无法正确解释。这是渐变的 CSS 代码：

#mainmenu {
  #css3_backgroundLinearGradient({
    'angle': 'top',
    'colors': [
      {'color': '#77D3F8', 'position': '0%'},
      {'color': '#3FA4D8', 'position': '100%'}
    ]
  })
  box-shadow: 0px 1px 2px $theme.linkColor;
}

当我在网页上查看源代码时，我还看到一行，即：

  <div class="gradientfilterIE"></div>.

我不确定，这条线是罪魁祸首吗？但是完整的开源项目源代码没有gradientfilterIE这一行。我不确定这条线是否导致问题，那么它来自哪里？

我需要您的专家意见，为什么我在 IE 上看到不同的渐变颜色，但在 Firefox 和 Chrome 上却完美运行。

设置这个实际上解决了我的问题：

#mainmenu .gradientfilterIE {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8',     endColorstr='#3FA4D8',GradientType=0 );
}

我们是否需要filter: progid:DXImageTransform.Microsoft.gradient 仅用于 IE？因为在 Firefox 和 Chrome 上，没有它也可以正常工作。

【问题讨论】：

您是否使用了像 LESS 之类的 CSS 编译器？如果有，是哪一个？
如果我可以大胆猜测一下，这是使用 Java 的 Velocity 引擎吗？我们应该通过“一个开源项目”知道它是什么？
是的，它是 Java 的速度引擎。开源是 xwiki。我没有命名它，因为我不希望讨论被定向到 xwiki

标签： html css gradient

【解决方案1】：

渐变仅适用于现代浏览器而不是 IE，但您显示的 CSS 一开始就无效。

【讨论】：

嗨，rob，这个 css 在 Firefox 和 chrome 中运行良好。看起来css没有任何问题。
@MSach 这个 CSS 只能工作，因为它是在提供给浏览器之前编译的。如果您将其直接插入到 html 文档中，您将收到 CSS 解析器的许多错误和警告。
完全正确。抱歉，我之前不知道这个速度引擎
@sirko 我们是否需要滤镜渐变（ filter: progid:DXImageTransform.Microsoft.gradient () 仅适用于 IE，因为它可以在没有它的情况下在 firefox 上工作？
@MSach 抱歉，我没有足够的 CSS 过滤器和渐变经验来帮助您。但是您应用的过滤器仅限于 IE。我不知道，现在是否有跨浏览器解决方案。