升级到IE11后，背景图片变得模糊

Question

今天早上我收到了IE 11的自动更新，检查后发现我的一些背景图片变得模糊。

我必须确认这不是由于我的图片引起的问题，因此启动Chrome后，它们又变得清晰了......我真的很困惑。

现在我已经卸载了IE11更新，在IE10中它们再次变得清晰了......还有其他人遇到过这种情况吗？

我包含了一个屏幕截图，显示了不同浏览器中的图片。

这里是一个链接到jsfiddle，我不再拥有IE11进行测试，但使用的是相同的标记和CSS：http://jsfiddle.net/3g52E/

- wf4

---

你有检查过IE11中的加速图形设置吗？ - Andrea Ligios

可能也是由于“智能图像抖动”引起的 - 可以在设置中启用。 - naththedeveloper

还有一个问题，是哪个系统，Windows 7 还是 Windows 8？我猜这可能与 http://news.softpedia.com/news/Internet-Explorer-11-for-Windows-7-Blurry-Font-Issues-398251.shtml 有关。 - Andrea Ligios

又一個因不使用Internet Explorer而解決的愚蠢網路問題。 - David Hariri

如果我打开图像文件 http://i.imgur.com/DauuVHW.png，它没有模糊。 - hal

Answer 1

我可以看出是什么原因导致了这个问题。它是由你的 ._ui 的 border-radius 引起的。

现在我不能告诉你为什么会发生这种情况。但是如果你想解决这个问题，你可以选择不使用 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 的元素的一部分，这导致了这个问题。现在它们有了更清晰的分离; 两个不同的元素。

jsFiddle

- nkmol

---

我从未想过这可能是由于border-radius引起的问题，特别是因为该属性在IE9和IE10中得到支持并且应该被应用。非常感谢您详细的回答。 - wf4

这真的很奇怪呢。我找不到任何关联原因，可能是一个未知的 bug。但很高兴我能快速为你找到解决方法！ :) - nkmol

Answer 2

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

在我们的应用程序中，我们在圆角按钮上放置了带有图标的图标。删除圆角或使用<img>作为图标并不是选项。

然而，对我们起作用的是针对视网膜显示器的“经典”图像优化，即将按钮背景图像保存为两倍分辨率，然后在background-size中指定原始大小。

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

- Feodor Fitsner

---

谢谢您的回答 - 我将把图像文件重新缩放为144 dpi（目前为72），并添加一个新链接到那个fiddle以展示结果。 :-) - wf4

好的，所以我重新创建了（部分）在fiddle中使用的图像，并已更新背景大小。我必须承认它“看起来”还不错，虽然不是像素完美，但肯定比第一个图像好。http://jsfiddle.net/3g52E/5/ - wf4

Answer 3

根据这个：如何为IE 11编写CSS hack？ 我将以下代码添加到我的CSS文件中：

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

通过这个浏览器hack，在IE11中边框不再是圆形的，但至少背景图片不再模糊。在其他浏览器中，它们仍然是圆形的。

- user2718671