Internet Explorer 11 размывает фоновое изображение с радиусом границы

у меня есть 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), размытие исчезнет, ​​но мне все равно нужно правильно расположить фон...

РЕДАКТИРОВАТЬ2:

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

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

РЕДАКТИРОВАТЬ3:

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

ЖИВОЙ ПРИМЕР:

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


html css background-image internet-explorer-11
person Mattia Del Franco    schedule 16.02.2014    source источник
comment
попробуйте размер фона; 100%;   -  person    schedule 16.02.2014
comment
ничего, он расширяет изображение на весь div, который больше, чем фоновое изображение.   -  person Mattia Del Franco    schedule 16.02.2014
comment
Ответ этого пользователя, кажется, работает: stackoverflow.com/a/27468890/286455   -  person EdwardM    schedule 01.07.2015
comment
stackoverflow.com/questions/20723057/ Попробуйте это   -  person lyndact    schedule 23.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Поместите изображение bg внутрь элемента span. Это сохранит радиус границы и фоновое изображение в разных элементах.

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

.element span {
    background-image:url('imagepath.png');
 }
person S.M. Pat    schedule 15.11.2015