修复IE 11浏览器中的CSS底部阴影显示异常问题

嘿，这个问题我太熟悉了！IE11对CSS滤镜（filter）和伪元素的组合支持确实拉胯，尤其是blur滤镜搭配border-radius的时候，很容易把你想要的模糊阴影变成一块实心黑。不用单独加IE专属样式表的话，有几个简便的解决办法：

方法1：用IE11专属CSS Hack隐藏有问题的伪元素 #

你可以在现有CSS后面加一段只让IE11识别的样式，直接隐藏这个出问题的伪元素：

.service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    background: #000;
    filter: blur(20px);
}

/* 仅IE11会应用这段样式，隐藏伪元素 */
_:-ms-fullscreen, :root .service_group:hover .uk-box-shadow-bottom:before {
    display: none;
}

这个hack利用了IE11特有的规则，其他浏览器会直接忽略这段代码，不会影响Chrome和Firefox的正常显示。

方法2：替换成全兼容的box-shadow实现 #

其实你可以完全抛弃伪元素的方式，直接用box-shadow来实现底部模糊阴影，这种方式所有浏览器（包括IE11）都支持，代码还更简洁：

.service_group:hover .uk-box-shadow-bottom {
    /* 调整参数可以接近你原来的模糊效果 */
    box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
}

box-shadow的参数依次是：水平偏移、垂直偏移、模糊半径、扩散半径、颜色。你可以根据需求调整数值，达到和原来伪元素阴影类似的视觉效果。

方法3：用@supports仅在兼容浏览器中应用伪元素样式 #

IE11不支持CSS的@supports规则，我们可以利用这一点，只在支持正确filter: blur的浏览器里加载伪元素样式：

@supports (filter: blur(20px)) and (not (-ms-high-contrast: none)) {
    .service_group:hover .uk-box-shadow-bottom:before {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 20px;
        border-radius: 100%;
        background: #000;
        filter: blur(20px);
    }
}

这样IE11会跳过这段样式，不会生成那个实心黑块，而Chrome、Firefox这些现代浏览器依然能正常显示你想要的模糊阴影。

个人最推荐方法2，不仅兼容性最好，代码也更简洁易维护，不用依赖任何hack或者特殊规则~

内容的提问来源于stack exchange，提问作者atsngr