更新到IE11后模糊的背景图像

Question

所以今天早上我得到IE 11的自动更新,在检查了我的眼睛后,我的一些背景图像看起来很模糊.

我不得不检查是不是我的图像导致问题,所以在启动Chrome之后,它们又好又清脆......我完全不知所措.

我现在已经卸载了IE11更新,它们在IE10中再次变得漂亮和清晰......有没有其他人遇到过这个？

我已经包含了一个屏幕截图,显示了不同浏览器中的图像.

IE 11模糊的背景图像

这是一个链接到一个jsfiddle,我没有IE11任何更长的测试,但它与我使用的相同的标记和CSS:http://jsfiddle.net/3g52E/

Answer 1

好吧,我可以看到导致这个问题的原因.这border-radius是你的._ui.

现在我不能告诉你为什么会这样.
但是,如果你想修复它,你可以或不使用border-radius或,我认为这是一个更好的解决方案,使用<img>标签生成背景.

使用图像元素

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

现在切断你的图像,你可以使用position: relative;,position: absolute;并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个不同的元素.