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

Question

此模糊在 Chrome 中运行良好，但在 Edge 或 IE 中运行不佳。这似乎是微软的一个错误。有人可以找到我的代码中的错误，以便我可以获得预期的行为吗？

谢谢！

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

Answer 1

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

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

Why doesn't this CSS Blur work in IE, but works in Chrome?

html

css

internet-explorer

microsoft-edge