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

EDIT:

Я заметил, что если я удалить позицию "центр центра" фона от .soundicon (или границы радиуса от диапазона .button), размытие исчезает, но я все равно нужно правильно расположить мой фон ...

EDIT2:

Действительно странная ошибка IE11, кажется, что если я укажу позицию в px вместо центра или 50%, фоновое изображение не будет размыто/быть беспорядочным.

Internet Explorer по-прежнему плохой браузер.

EDIT3:

None, с позицией рха, уже размытость на некоторых изображениях, но меньше, чем если бы я использовать центр /%.

эфире Пример:

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

Answer 1

Место BG изображения внутри диапазона элемента. Это позволит сохранить радиус границы и фоновое изображение в разных элементах.

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

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