IE11使背景图像文本模糊

Question

我正在一个网站上工作,我在按钮上使用图像精灵.在我试过的其他浏览器中,除了IE11之外,我的精灵上的文字应该是清晰的,但是在IE11中,文字变得模糊(见图片).

模糊的是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

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

1. 它无法访问或 SEO 效率不高——屏幕阅读器和搜索引擎爬虫都无法读取图像中的文本。
2. 它需要一个额外的 HTTP 请求来下载精灵图像，这将使您的网站加载更慢 - 特别是在移动设备上
3. 除非你使按钮太多比它需要在网页上呈现，并缩减较大，那么你将不得不在高密度设备，如新的全尺寸iPad和溢价Android平板电脑，最近Mac和溢价扩大的时候模糊的问题Windows 笔记本电脑。显然，使图像大于它需要的大小意味着它更大并加剧了从第二点开始的速度损失。
4. 如果你想在以后的任何时候改变配色方案，你只需要改变你的 CSS 颜色属性，而不是重新生成新的图像。
5. 让这个按钮看起来像你在 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）-

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