Question

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

我必须检查是不是我的图像导致了问题，因此在启动Chrome后，它们再次漂亮又清脆...... 我完全不知所措。

我现在已经卸载了IE11更新，它们在IE10中再次漂亮而且清晰......还有其他人遇到过这个吗？

我已经在屏幕截图中显示了不同浏览器中的图像。

IE 11 blurry background images

以下是jsfiddle的链接，我没有IE11可以测试，但我使用的是相同的标记和CSS：http://jsfiddle.net/3g52E/

Answer 1

我能看出是什么导致了这个问题。这是border-radius的{{1}}。

现在我无法告诉你为什么会发生这种情况。
但是如果你想解决这个问题，你可以或不使用._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; }元素的一部分了，这导致了这个问题。他们现在有更明确的分离; 2个不同的元素。

jsFiddle

Answer 2

在IE 11中修复模糊图像可能有更优雅的方法。

在我们的应用程序中，我们在带有圆角的按钮上有图标。删除圆角或使用＆lt; img＆gt; 作为图标不是选项。

然而，对我们有用的是视网膜显示器的“经典”图像优化，即保存具有两倍大分辨率的按钮背景图像，然后以背景大小指定原始尺寸。

在IE 11和视网膜显示器上看起来很棒。

Answer 3

我将此代码添加到我的CSS中：

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

有了这个浏览器黑客，IE11中的边框不再是圆形，但至少背景图像不再模糊。在任何其他浏览器中，它们仍然是圆的。