Последнее письмо вертикальное разрезание IE

Я использую шрифт Google Oswald в верхнем навигаторе this website, и он отлично работает во всех браузерах. Но, в двух разных IE11, установлено в двух разных компьютерах, половина времени загрузки страницы последних букв некоторых строк вырезаны:Последнее письмо вертикальное разрезание IE

last letter cut

Этих захваты в IE работает нормально (зеленые точки) и IE показывает проблему (красные точки):

enter image description here

Как вы можете видеть, это выглядит как текст сам по себе является оказание одинаковой ширины в обоих браузерах, но, в браузере с вопросом контейнеры обертывание текста недостаточно расширяется.

Хуже всего то, что это происходит только на компьютерах моего клиента, и я не могу воспроизвести проблему.

Я сделал расширенное исследование, и я попробовал много вещей:

Изменения шрифт веса
Проверка, что ни один местный шрифт Освальда не установлен в машине
Использование Oswald шрифта, загруженный с Font Squierrel, вместо Google Font
Изменение размера шрифта, интервала между словами, интервала между символами, деактивации текстового преобразования и текстовой тени
Активация/деактивация Windows ClearType

Если мой клиент нажимает кнопку обновления в IE с проблемой, половина времени загрузки страницы ОК. Кроме того, если он проверяет код и активирует и активирует один из стилей, например размер шрифта, проблема устраняется.

Проблема не случается с нормальными шрифтами или с

UPDATE:

Я сделал jsfiddle minimum model, воспроизводящий проблему. Я добавил два других текстовых блока, используя разные шрифты Google, и проблема касается только шрифта Освальда. Мой клиент говорит, что проблема возникает очень часто, когда он использует CTRL-F5 вместо F5.

enter image description here

В случае, если вы не можете получить доступ к jsfiddle, вот код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <style type='text/css'> 
      @import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300); 
      @import url(http://fonts.googleapis.com/css?family=Droid+Sans); 
      @import url(http://fonts.googleapis.com/css?family=Bowlby+One&v2); 
      body { 
       background: #ccc; 
      } 
      .container { 
       width: 158px; 
      } 
      .container h2 a { 
       text-transform: uppercase; 
       color: #fff; 
       font-size: 14px; 
       text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); 
       line-height: 1.5em; 
      } 
      .container h2 a:hover { 
       color: #ecd6bc; 
      } 
      .container.one h2 a { 
       font-family: 'Oswald'; 
      } 
      .container.two h2 a { 
       font-family: 'Droid Sans'; 
      } 
      .container.three h2 a { 
       font-family: 'Bowlby One'; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container one"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
     <div class="container two"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
     <div class="container three"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
    </body> 
</html>

Спасибо за вашу помощь.

источник

2014-10-31 Gustavo

Вы видите эту проблему, когда используете стандартные шрифты? Я тестирую IE11 как с Windows 7, так и с Windows 8.1, и не могу воспроизвести проблему. Не могли бы вы построить приведенный пример, который не содержит больше кода, чем это необходимо для иллюстрации проблемы? – Sampson

@JonathanSampson, я отредактировал все сообщение, чтобы ответить на ваш вопрос. Я сделал пример jsfiddle. Спасибо. – Gustavo

Вы пробовали это:

white-space: nowrap; overflow: hidden;

Refere этот источник для получения более подробной информации source.

источник

2014-12-10 18:39:57 Liondedan

Последнее письмо вертикальное разрезание IE

ответ

Смежные вопросы