参见英文答案 > IE11 making background image text blurry4个
我有一个具有border-radius和背景图像的div,这在所有浏览器中都很好地显示,除了Internet Explorer 11中,背景图像显示模糊. @H_403_3@我如何解决这个问题？

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

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

@H_403_3@编辑：

@H_403_3@我注意到,如果我从.soundicon(或span.button的边框半径)中删除背景的“中心”位置,则模糊消失,但是我反正需要正确放置我的背景…

@H_403_3@EDIT2：

@H_403_3@IE11的奇怪错误,似乎如果我以px代替中心或50％指定位置,背景图像就不会模糊/混乱.

@H_403_3@Internet Explorer仍然是一个糟糕的浏览器.

@H_403_3@EDIT3：

@H_403_3@没有,与px位置,已经模糊的某些图像,但小于如果我使用中心/％.

@H_403_3@实例：

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

.element {
    border-radius: 7px;
    border: 2px solid #494742;
 }
 
.element span {
    background-image:url('imagepath.png');
 }