在我的网站上，我注意到Firefox，Chrome和Internet Explorer之间的文本质量存在很大差异。尽管Chrome中的文字清晰明了，而Firefox中的文字更清晰明了，但Internet Explorer中的文字似乎模糊不清。这是图片比较:
我个人认为这在美学上并不令人满意。我想找到一种不要求用户使用Microsoft Silverlight之类的插件的解决方案，因为并非所有用户都希望安装插件只是为了查看1个网站。我不了解Facebook和StackOverflow之类的网站如何不会出现此问题(或至少没有问题)。
我尝试过使用CSS过滤器，不同的字体呈现属性以及对字体大小使用不同的单位，但是我没有看到任何效果。我知道我还没有尝试所有可能的CSS属性组合，所以这仍然可能是答案。
我一直在搜索Web和StackOverflow数小时，但尚未找到解决方案。这里还有其他类似的问题，但仍未得到解答。
我们非常欢迎您提供任何帮助或关于去哪里或做什么的想法。如果看不到图片或网站，请在不同的浏览器中运行此代码段:
html,body{
margin:0;
height:100%;
font: normal 14px/24px "Lucida Sans Unicode","Lucida Grande", "Arial", sans-serif;
}
.popup{
position:relative;
top:50%;
left:50%;
text-align: center;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
background-color:rgb(28, 31, 37);
color:white;
padding:1em;
z-index:2;
transform: translate(-50%,-50%);
-webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
}
p{
font-size: small;
}
input{
padding: 16px 12px;
width: 250px;
border: 0;
background: #0A0A0A;
color: #eee;
font-size: 14px;
font-family: "Open Sans",sans-serif;
-webkit-box-shadow: inset 0 0 0 1px #323742;
-moz-box-shadow: inset 0 0 0 1px #323742;
box-shadow: inset 0 0 0 1px #323742;
}
#blackout {
background: rgba(17,19,23,.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
}<div id="blackout"></div>
<div class="popup">
<h1>Compare this text</h1>
<p>And this text as well</p>
<input type="text" placeholder="Even placeholders are blurry">
</div>奇怪的是，该片段在不同的浏览器中看起来很相似:但是仔细看，仍然存在一定的差异。 Chrome (版本44.0.2403.125 m)似乎具有明显的边缘效果。 IE(11)似乎略有模糊。而@ user4749485解释的Firefox(38.0.1)似乎已经选择了两全其美的方式来实现最佳易读性。有没有一种方法可以仅手动为IE计算和调整字体？ (另一种可能的修复方法。)
我不确定其余的模糊来自哪里(与我网站上的文字相比，此处的摘录文字看起来更清晰)。如果我们能够发现差异的根源，那么可能会更容易解决。 (我一直在向代码段添加/删除CSS，因此请原谅所有修改)
TL:DR，仅说明问题:我希望IE中的文本看起来像Firefox或Chrome中一样。
Sergey Denisov的答案比较:
虽然我可以使用Srikanth Pullela的答案仅将此CSS转换应用于IE，但我对是否存在所有浏览器修复感到好奇。
编辑:我将使用上述方法，因为建议的修复会导致这种情况发生，这意味着我不能依靠GPU渲染来正确渲染它:
最佳答案
您是否尝试为弹出窗口添加translateZ(0)？在您的情况下，可能是:
.popup {
...
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
...
}
在Windows 8.1的IE11中，字体看起来更好:
html, body {
margin: 0;
height: 100%;
font: normal 14px/24px "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif;
}
.popup {
position: relative;
top: 50%;
left: 50%;
text-align: center;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
background-color: rgb(28, 31, 37);
color: white;
padding: 1em;
z-index: 2;
-webkit-filter: blur(0);
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
}
p {
font-size: small;
}
input {
padding: 16px 12px;
width: 250px;
border: 0;
background: #0A0A0A;
color: #eee;
font-size: 14px;
font-family: "Open Sans", sans-serif;
-webkit-box-shadow: inset 0 0 0 1px #323742;
-moz-box-shadow: inset 0 0 0 1px #323742;
box-shadow: inset 0 0 0 1px #323742;
}
#blackout {
background: rgba(17, 19, 23, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
}<div id="blackout"></div>
<div class="popup">
<h1>Compare this text</h1>
<p>And this text as well</p>
<input type="text" placeholder="Even placeholders are blurry">
</div>P.S. 添加了
-webkit-filter: blur(0)以修复this post在Windows 7 / 8.1的Chrome 44中模糊的文本。关于html - Internet Explorer中的文字模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31638488/