问题
Internet Explorer does not respect the css property filter: brightness(100);. Following this tutorial I have also tried using ms-filter: brightness(1); but that did not work either. Is there a work-around?
Not sure if this makes a difference, but I am applying the filter onto a background image svg.
https://codepen.io/anon/pen/Ovoxqg (Works in Chrome, breaks in IE11. You should see a gray heart and white heart.)
<div class="icon"></div>
<br><br><br>
<div class="icon brightness"></div>
body {
background-color: aqua;
}
.icon {
width: 25px;
height: 25px;
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
}
.brightness {
filter: brightness(100);
-ms-filter: brightness(1);
}
来源：https://stackoverflow.com/questions/49661874/ie11-css-filter-brightness