Текст отрезав в Internet Explorer при использовании текста-тень

Question

Недавно я построил этот сайт: http://billy.fm/

Если открыть эту страницу в Internet Explorer 11, вы увидите, что большой заголовок, который читает Samuel- 613, отрезается справа.

Отключить свойство text-shadow в этой рубрике в средствах разработчика IE, как представляется, устраняет проблему.

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

/* Does not work */ 
.project__title { 
    text-shadow: 0 0 2px #fff; 
} 

/* Works */ 
.project__title { 
    text-shadow: 0 0 10px #fff; 
} 

Weird bug - любые идеи?

Я использую Internet Explorer 11 на Windows 7. Это может происходить и в других версиях.

Answer 1

Как я уже говорил в комментариях, отрицательный letter-spacing вызывает этот вопрос. Возможно, вы захотите добавить к диапазону padding-right без необходимости корректировки letter-spacing, а не text-shadow.

Answer 2

Ошибка:

Величина размывания-радиус 2px в text-shadow вызывает ошибку Win7 + IE11. Это значение настройки тени для более широкого значения. Установите его на 0 или удалите его, чтобы разрешить отсечку.

Альтернативное решение

отсечения может быть решена путем изменения letter-spacing свойства.

Для сохранения расстояния и удаления отсечки вы можете дойти до -0.08em с текущей настройкой.

.project__title span { 
    letter-spacing: -0.08em; 
}