为什么在IE上显示不同的渐变颜色，但完美的Firefox和Chrome浏览器？ [英] Why Displaying different gradient color on IE but works perfectly on firefox and chrome?

问题描述

我正在开发其中一个开源项目。我正面临一个奇怪的问题。当我在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上看到不同的渐变颜色，但是

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

  #mainmenu .gradientfilterIE {
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃77D3F8'，endColorstr ='＃3FA4D8'，GradientType = 0 ）; 
 
 
 
 
 
 
 我们是否需要 filter：progid： DXImageTransform.Microsoft.gradient 仅适用于IE？ 
因为在Firefox和Chrome上，没有它，它也可以正常工作。  
 
解决方案
现代浏览器，而不是IE浏览器，但你显示的CSS无效。
 
I am working on one of the opensource projects. I am facing a weird problem.  When I open the website on Firefox or Chrome it displays the color I expect, but on IE it does not show up in that color (it shows very light color). My guess is, that this is happening because of the gradient I am using which IE is not able to interpret correctly. Here is gradient CSS code:
#mainmenu {
  #css3_backgroundLinearGradient({
    'angle': 'top',
    'colors': [
      {'color': '#77D3F8', 'position': '0%'},
      {'color': '#3FA4D8', 'position': '100%'}
    ]
  })
  box-shadow: 0px 1px 2px $theme.linkColor;
}
When I do the view source on web page, I also see a line i.e:
  <div class="gradientfilterIE"></div>.   
I am not sure, is this line the culprit? But the complete open source project
source code does not have this line with gradientfilterIE.  I am not sure if this line is causing the issue then where is it coming from?

I need your expert opinion why I see different gradient color on IE but works perfectly on Firefox and Chrome.

Setting this actually solved my problem:
#mainmenu .gradientfilterIE {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8',     endColorstr='#3FA4D8',GradientType=0 );
}
Do we require filter: progid:DXImageTransform.Microsoft.gradient only for IE?
Because on Firefox and Chrome, without this it also works fine.
解决方案
Gradients only work in modern browsers and not IE but that CSS you show is invalid in the first place.

                        
这篇关于为什么在IE上显示不同的渐变颜色，但完美的Firefox和Chrome浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！