Размытый текст в Internet Explorer

На моем веб-сайте я заметил, что существует существенная разница в качестве текста между Firefox, Chrome и Internet Explorer. Несмотря на то, что текст в Crystal 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>

Ответ 1

Вы пытались добавить translateZ (0) для своего всплывающего окна? В вашем случае это может быть:

.popup {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

В IE11 в Windows 8.1 шрифт выглядит лучше:

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>

Ответ 2

Единственное, что я предлагаю, это использовать приведенный ниже код и написать отдельный 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" />

Ответ 3

Используйте встроенный файл OpenType (EOT) (формат .eot или .ote) того семейства шрифтов, которое вы используете.

Ответ 4

Откройте "Инструменты IE" и выберите "Свойства обозревателя".
Затем перейдите в Advanced и unchecked "Всегда используйте ClearType для HTML".