为什么这个 CSS Blur 在 IE 中不起作用，但在 Chrome 中起作用？答案

【问题标题】：Why doesn't this CSS Blur work in IE, but works in Chrome?为什么这个 CSS Blur 在 IE 中不起作用，但在 Chrome 中起作用？
【发布时间】：2016-06-15 01:31:51
【问题描述】：

此 Blur 在 Chrome 中效果很好，但在 Edge 或 IE 中效果不佳。这似乎是一个微软的错误。有人能找出我的代码有什么问题，以便我得到预期的行为吗？

谢谢！

https://jsfiddle.net/o3xpez4s/1/

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

【问题讨论】：

因为IE不支持filter？ caniuse.com/#feat=css-filters

标签： html css internet-explorer microsoft-edge

【解决方案1】：

CSS3 过滤器在 IE 10 中不起作用——它们不受支持。一些旧版本的 Firefox 也不支持过滤器。您可以在此链接中查看支持： http://caniuse.com/#feat=css-filters

【讨论】：

谢谢。我在其他地方读到过，但很困惑，因为如果我删除“溢出：隐藏”，我可以让模糊效果在 Edge 中工作，但这会导致其他显示问题。既然 IE 确实不支持 Blur，那我想我可以通过将 Blur 替换为渐变之类的东西来解决我的问题。
是的，渐变可以解决它。但是由于缺乏支持，特别是模糊过滤器总是在 IE 中出现问题，我建议最好更新 IE 并检查:)