Internet Explorer

Question

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

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

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

我已经在网上和StackOverflow上搜索了好几个小时了，还没有找到解决方案。这里还有其他类似的问题，但仍然没有答案。

非常欢迎任何帮助或关于去哪里或做什么的想法。如果您无法看到图片或网站，请在不同的浏览器中运行此代码段：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

奇怪的是，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：

.row{
margin-left:0px;
margin-right:0px;
}

#wrapper {
padding-left: 0px;
transition: all .4s ease 0s;
height: 100%;
}

#sidebar-wrapper {
margin-left: 0;
left: 0;
width: 250px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
opacity: 0.8;

}

.sidebar-nav {
display: block;
float: left;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}

#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}

#wrapper.active {
padding-left: 0px;
}

#wrapper.active #sidebar-wrapper {
left: -250px;
}

#page-content-wrapper {
width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
color: #ffffff;
display: block;
float: left;
text-decoration: none;
width: 250px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}

.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}

.sidebar-nav li {
line-height: 40px;
text-align: center;
}

.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}

.sidebar-nav li a:hover {
 color: #fff;
 background: rgba(255,255,255,0.2);
 text-decoration: none;
 }

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
 text-decoration: none;
 }

.sidebar-nav > .sidebar-brand {
 height: 65px;
 line-height: 60px;
 font-size: 18px;
 }

 .sidebar-nav > .sidebar-brand a {
 color: #999999;
 }

 .sidebar-nav > .sidebar-brand a:hover {
 color: #fff;
 background: none;
 }

如果您想定位所有IE版本，请使用：

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

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>

P.S。添加-webkit-filter: blur(0)以修复{7}上Windows 7 / 8.1上Chrome 44中的模糊文字。

Answer 3

使用您正在使用的font-family的Embedded OpenType（EOT）文件（.eot或.ote格式）。

Answer 4

1. 打开IE工具并选择“Internet选项”。
2. 然后转到“高级”并取消选中“始终使用ClearType for HTML”。

Answer 5

我在IE-11 windows 10中面临同样的问题，最终能够通过用 translate（tx，ty） translate3d（tx，ty，tz）来解决它>

旧用法

.show_panel { transform: translate3d(0, 100%, 0); }

新用法

.show_panel ( transform: translate(0, 100%); }

它对我有用，详情如下： https://github.com/angular/material/issues/4544

Answer 6

实际上这似乎是由于四舍五入的错误。如果您遇到可调整大小窗口的问题，此处建议的修复程序将无法正常工作。如果使用2d翻译对特定大小的文本进行模糊处理，则可以使用3d翻译修复它，反之亦然。但是，如果调整窗口大小，将始终存在某些窗口大小导致文本模糊。

Answer 7

我已解决以下问题： Internet Explorer 11>工具>选项>高级： 加速图形：使用软件渲染是 可访问性：所有复选框均为否