Question

我正在一个网站上工作，我在按钮上使用图像精灵。在我尝试过的所有其他浏览器中，除了IE11之外，我的精灵上的文字应该是清晰的，但在IE11中，文字会变得模糊（参见图片）。

IE11 Other browser

模糊的是IE11 ofc。精灵的宽度为189px，高度为378px。我使用以下CSS：

button {
    width:189px;
    height:189px;
    background-image:url('../images/kontakt-os.png');
    background-position: top;
    cursor:pointer;
    border-radius: 100px;
}

button:hover {
    background-position: bottom;
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}

这只是一个IE漏洞，还是我真的可以做些什么呢？

提前致谢。

编辑：我可能只是补充说，如果我只插入与<img src="lala.png">相同的图像，那么文字就不会模糊。它仅适用于背景：/

Answer 1

这是一个正常的IE错误。

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

我还没有找到任何解决方案。

Answer 2

由于以下原因，我建议不要将该按钮用作精灵 -

无法访问或SEO效率 - 屏幕阅读器和搜索引擎抓取工具都无法读取图像中的文本。
下载精灵图片需要额外的HTTP请求，这会使您的网站加载速度变慢 - 尤其是在移动设备上
除非您使按钮大于需要在页面上呈现并按比例缩小的按钮，否则在扩展高密度设备时会出现模糊问题，例如较新的全尺寸iPad和高级Android平板电脑，最近的Mac和高级Windows笔记本电脑。显然，使图像大于它所需的图像意味着它更大并且加剧了从第二点开始的速度惩罚。
如果您想在将来的任何时候更改颜色方案，您只需要更改CSS颜色属性，而不是重新生成新图像。
琐碎使这个按钮看起来像是CSS中的截图。

如果你使用这样的标记 -

<button class="text-button" type="button">Send Besked</button>

这样的CSS -

.text-button {  
    background: #b32e01;
    border: none;
    border-radius: 8px 8px 8px 0;
    color: #ffffff;
    cursor: pointer;
    height: 3em;
    outline: none;
    padding: 1em 0;
    text-transform: uppercase;
    width: 12.5em;
}

.text-button:hover {
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}

最终看起来像这样（见JSFiddle for source） -

Button mockup

虽然只是一个粗略的模型（你可能想要改变比例，添加渐变或改变悬停时的背景 - 我看不到原始精灵知道你在悬停状态精灵中进行的转换）它已经看起来很多像原版一样，具有上述所有优点 - 特别是它应该解决您最初发布的文本问题。

Answer 3

我刚刚遇到过这个问题。

我只是将背景图像放在一个跨度内，以保持边框半径和背景图像在不同的元素上，似乎已经完成了这一操作。

.item {
   border-radius: 8px 8px 8px 0;
}

.item span {
    background-image:url('imagepath.png');
}

Answer 4

我通过使用：not（：hover）找到了消除模糊效果的成功。它似乎迫使背景图像变得模糊不清。

尝试添加

button:not(:hover) {
  width:189px;
  height:189px;
  background-image:url('../images/kontakt-os.png');
  background-position: top;
  cursor:pointer;
  border-radius: 100px;
}

IE11使背景图像文本模糊

4 个答案: