У меня есть 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(или радиуса границы из span.button), размытие исчезнет, но мне все равно нужно правильно расположить свой фон..
EDIT2:
Действительно странная ошибка IE11, кажется, что если я укажу позицию в px вместо центра или 50%, фоновое изображение не будет размыто/быть беспорядочным.
Internet Explorer по-прежнему является плохим браузером.
EDIT3:
Нет, с позицией px, уже размывается на некоторых изображениях, но меньше, чем если я использую center/%.
ПРЯМОЙ ПРИМЕР: