为什么这个CSS模糊工作在IE中，但在Chrome中起作用？

这款Blur在Chrome中运行良好，但不支持Edge或IE。这看起来像是一个微软的bug。有人可以找到我的代码中有什么问题，以便我可以得到预期的行为吗？为什么这个CSS模糊工作在IE中，但在Chrome中起作用？

谢谢！

<div id="MainBackground"> 
    <div id="TextBoxArea"> 
     <div id="BlurDiv"></div> 
     <div id="TextDiv">TEXT GOES HERE</div> 
    </div> 
</div> 

#MainBackground { 
    background-image: url(http://placekitten.com/700/300); 
    height: 250px; 
    width: 600px; 
    border-radius: 8px; 
} 
#TextBoxArea { 
    /* This should float towards the bottom of the MainBackground image */ 
    /* It should have a clean, non-blurred border */ 
    position: relative; 
    width: 450px; 
    top: 170px; 
    left: 60px; 
    border: 2px solid; 
    border-color: black; 
    border-radius: 25px; 
    overflow: hidden; 
    padding: 10px; 
    text-align: center; 
    height: 45px; 
} 
#BlurDiv { 
    /* This should contain the blurred background image */ 
    /* The image is moved a bit so that the eyeballs of the image are visible and blurred */ 
    position: absolute; 

    width: 100%; 
    height: 100%; 

    top: -100px; 
    left: -50px; 
    padding-left: 50%; 
    padding-top: 50%; 

    background-image: url(http://placekitten.com/800/300); 
    background-position-x: -134px; 
    background-position-y: -52px; 
    background-repeat: no-repeat; 

    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 
#TextDiv { 
    /* This just contains text. Text text should not be blurred. */ 
    position: relative; 
    color: white; 
    font-size: 40px; 
    font-weight: normal; 
}

来源

2016-06-14 Jeremy

因为IE不支持'filter'？ http://caniuse.com/#feat=css-filters – j08691

CSS3过滤器不会在IE 10的工作 - 他们不被支持。一些旧版本的Firefox也不支持过滤器。您可以在此链接检查支持： http://caniuse.com/#feat=css-filters

来源

2016-06-14 16:59:05 Puneet

谢谢。我在其他地方读过，但很困惑，因为如果删除“overflow：hidden”，我可以使Blur效果在Edge中工作，但会导致其他显示问题。由于IE真的不能支持模糊，那么我认为我会通过用渐变替代我的模糊来解决我的问题。 – Jeremy

是的渐变可以解决它。但特别模糊过滤器总是给IE中的问题，由于缺乏支持，我会建议更好地更新IE浏览器并检查:) – Puneet

为什么这个CSS模糊工作在IE中，但在Chrome中起作用？

回答

相关问题