更新到 IE11 后背景图像模糊答案

【问题标题】：Blurry background images after update to IE11更新到 IE11 后背景图像模糊
【发布时间】：2015-04-23 15:49:05
【问题描述】：

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

我必须检查是不是我的图像导致了问题，所以在启动 Chrome 后，它们又变得又好又清晰了…… 我完全感到困惑。

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

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

这里是jsfiddle 的链接，我不再需要测试 IE11，但它的标记和 CSS 与我使用的相同：http://jsfiddle.net/3g52E/

【问题讨论】：

【解决方案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 的元素的一部分，这会导致此问题。他们现在有了更明确的分离； 2 种不同的元素。

【讨论】：

【解决方案2】：

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

在我们的应用程序中，我们在圆角按钮上有图标。删除圆角或使用图标不是选项。

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

在 IE 11 和 Retina 显示器上看起来很棒。

【讨论】：

感谢您的回答 - 我要将图像文件重新缩放为 144 dpi（当前为 72），并将添加一个新链接到该小提琴以显示结果。 :-)
好的，所以我重新创建了（部分）我在小提琴中使用的图像并更新了背景大小。我不得不承认它“看起来”没问题，它不是像素完美的，但它肯定比第一张图像更好。 jsfiddle.net/3g52E/5

【解决方案3】：

据此：How to write a CSS hack for IE 11?

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

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

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

【讨论】：