Internet Explorer中的模糊文本

Question

在我的网站上,我注意到Firefox,Chrome和Internet Explorer之间的文本质量存在很大差异.虽然Chrome中的文字非常清晰,但在Firefox中却更为明显,但在Internet Explorer中它似乎模糊不清.这是一张图片比较:

就个人而言,我认为它在美学上并不令人愉悦.我想找到一个解决方案而不要求用户使用像Microsoft Silverlight这样的插件,因为并非所有用户都想安装一个插件来查看1个网站.我不明白像Facebook和StackOverflow这样的网站没有这个问题(或者至少没有问题).

我尝试过使用CSS过滤器,不同的字体渲染属性,以及使用不同的字体大小单位,但我看不到任何效果.我知道我没有尝试过所有可能的CSS属性组合,所以这仍然是答案.

我已经在网上和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>

奇怪的是,Snippet在不同的浏览器中看起来很相似:但仔细观察却有明显的差异.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渲染来正确渲染它:

Answer 1

我建议的唯一的事情是使用下面的代码并编写单独的CSS,所以当在IE中打开时,它将只采取该css.

这将仅针对早期版本的IE8:

 <!--[if lt IE 8]>
<link href="./Content/ie7.css" rel="stylesheet" />
  <![endif]-->

如果要定位所有IE版本,请使用以下命令:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />

Answer 2

您是否尝试为弹出窗口添加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>

PS已添加-webkit-filter: blur(0)以修复此帖子中 Windows 7/8.1上Chrome 44中的模糊文本.