Internet Explorer 11 用边框半径模糊背景图像 [重复]

Question

我有一个带有边框半径和背景图像的 div，它在所有浏览器中都能很好地显示，但在 Internet Explorer 11 中，背景图像显得模糊。

我该如何解决这个问题？

<span class="button boxsizing soundicon"></span>

CSS：

.roomscene .top .roominfo .center span.button {
    height: 29px;
    width: 29px;
    background-color: #23221d;
    border-radius: 7px;
    border: 2px solid #494742;
    margin-top: -10px;
    display: inline-block;
    float: right;
}

.roomscene .top .roominfo .center span.button:hover {
    background-color: #2f2d27;
    cursor: pointer;
}

.roomscene .top .roominfo .center .soundicon {
    background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
}

编辑：

我注意到，如果我从 .soundicon 中删除背景的“中心中心”位置（或从 span.button 中的边框半径），模糊就会消失，但我无论如何都需要正确定位我的背景。 .

EDIT2：

IE11 的真正奇怪的错误，似乎如果我以 px 而不是中心或 50% 为单位指定位置，背景图像不会模糊/混乱。

Internet Explorer 仍然是一个糟糕的浏览器。

EDIT3：

无，像素位置，在某些图像上已经模糊，但比我使用 center/% 时要少。

活生生的例子：

http://codepen.io/toomuchdesign/pen/ojspA

Answer 1

将 bg 图像放在 span 元素中。这将使边框半径和背景图像保持在不同的元素中。

.element {
    border-radius: 7px;
    border: 2px solid #494742;
 }

.element span {
    background-image:url('imagepath.png');
 }