Размытые фоновые изображения после обновления до IE11

Итак, сегодня утром я получил автоматическое обновление до IE 11, после проверки моих глаз кажется, что некоторые из моих фоновых изображений размыты.

Я должен был проверить, что это не мое изображение вызывает проблему, поэтому после запуска Chrome они снова были приятными и четкими... Я совершенно сбит с толку.

теперь я удалил обновление IE11, и они снова приятные и четкие в IE10... Кто-нибудь еще сталкивался с этим?

Я включил снимок экрана отображение изображений в разных браузерах.

IE 11 blurry background images

вот ссылка на jsfiddle, У меня больше нет IE11 для тестирования, но его та же разметка и CSS, которые я использую:http://jsfiddle.net/3g52E/

13
background-image css internet-explorer-11

3 ответов

Ну, я вижу, что вызывает эту проблему. Это border-radius вашего ._ui.

сейчас я не могу сказать вам почему это произойдет.
однако, если вы хотите исправить это, вы можете или не использовать border-radius или, что является лучшим решением, на мой взгляд, используйте <img> тег для создания фона.

использовать элемент изображения

<img src="http://i.imgur.com/DauuVHW.png" />

теперь, чтобы отрезать ваше изображение, вы можете просто использовать position: relative;, position: absolute; и a overflow: hidden;:

.block1 > div
{
    position: relative;
    overflow: hidden;
}

это добавит свойства на ._ui _bre и ._ui _com.

где основные свойства изображения:

img
{
    position: absolute;
    left: 2px;
}

теперь вы можете просто использовать верхнее и нижнее смещение для позиционирования изображения. Где, как вы использовали background-position перед:

._bre._ui img
{
    top: -68px;
}

._com._ui img
{
    top: -24px;
}

таким образом, ваше изображение не является частью элемента, который имеет border-radius больше, что вызвало эту проблему. Теперь у них более четкое разделение; 2 разные элементы.

jsFiddle

9

вероятно, есть более элегантный способ исправить размытые изображения в IE 11.

в нашем приложении у нас есть значки на кнопках с круглыми углами. Удаление круглых углов или использование для значков не было опций.

однако для нас сработала" классическая " оптимизация изображений для дисплеев retina, т. е. сохранение фоновых изображений с вдвое большим разрешением, а затем указание исходного размера в фон-в размере.

отлично смотрится в IE 11 и на дисплеях retina.

2

согласно этому:Как написать CSS hack для IE 11?

Я добавил этот код в свой CSS:

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 } 
}

С помощью этого браузера взлома границы больше не круглые в IE11, но, по крайней мере, фоновые изображения больше не размыты. В любых других браузерах они по-прежнему круглые.

1