IE9 межбуквенная проблема - PullRequest
18 голосов
/ 01 апреля 2011

У меня есть страница, которая отображается нормально, в FF (3x, 4x), Chrome, IE (6, 7, 8).

При тестировании на IE9 тексты шире.При исследовании проблемы выясняется, что текст на самом деле визуализируется, причем буквы более пространные, чем в других браузерах.

При изменении межбуквенного интервала на -0.6px текст отображается нормально, как и в других браузерах.Также при изменении режима рендеринга на «Представление совместимости» страница выглядит просто отлично.

Знаете ли вы, что послужило причиной изменения в режиме рендеринга?

Я «решил» проблему с помощьюусловный комментарий, но я не очень рад этому

<!--[if IE 9]>
<style>
    * {letter-spacing: -0.6px;}
</style>
<![endif]-->

Существуют ли другие способы для решения проблемы?

Редактировать

Я сделал несколько скриншотов на разных машинах и в разных браузерах, и результат можно увидеть здесь

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
    body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>

Ответы [ 9 ]

4 голосов
/ 01 апреля 2011

Это может быть связано с округлением вверх / вниз. Использование десятых доли пикселя - странная вещь, поскольку вы не можете получить меньше целого пикселя на экране, если не знаете, как пойдет округление. Вы не можете полагаться на IE, чтобы получить что-нибудь правильно.

4 голосов
/ 01 января 2012

Попробуйте, как это работает с Internet Explorer 8 и Firefox:

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE установит интервал между первыми буквами в 0px и проигнорирует второе правило.Firefox прочитает второе правило и будет использовать его вместо первого.

Затем, чтобы компенсировать это, вы можете использовать тот же трюк и добавить больше горизонтальных отступов к вашему тексту в MSIE, чем то, что вы даете в Firefox.

Конечно, проводите дальнейшие тесты с другими браузерами!

3 голосов
/ 16 ноября 2011

Еще одна вещь, которую стоит учесть, поскольку прошло уже семь месяцев с тех пор, как вы задавали этот вопрос, - с июня 2011 года в 5-й версии FireFox начался график быстрого выпуска. Сейчас они до версии 8 и, как быстрый тест, я вижу, что версии 7 и 8 FireFox отображают текст почти в пикселях с IE9. По сравнению с этим, Chrome выглядит «сжатым», так как кернинг намного плотнее, а рендеринг с прозрачным шрифтом в Chrome (на мой взгляд) жестче, чем в IE9 и FF7 / 8.

Вы не гарантируете кросс-браузерную отрисовку шрифтов, не говоря уже о кроссплатформенности. Все браузеры, которые я просматривал по умолчанию (в Windows), Times New Roman, 16pt текст для «нормального» отображения. Если ваше приложение требует отрисовки текста до уровня соответствия для всех пользователей, всех браузеров, всех платформ, то отрендерите его как изображение и кэшируйте.

1 голос
/ 23 января 2013

Это также происходит со мной в IE8 по некоторым причинам. Ни уменьшение размера шрифта, ни установка межбуквенного интервала не решили проблему.

В другой теме я видел, что это может быть связано с font-face. К сожалению, я еще не нашел решение, но как только я его найду, я опубликую его здесь. Может не помочь вам сейчас, но может помочь людям, которые получат доступ к этому вопросу позже.

1 голос
/ 19 октября 2012

Попробуйте установить значение межстрочный интервал для всего документа, чтобы оно отображалось одинаково в IE и FF.

0 голосов
/ 22 ноября 2011

Боюсь, у меня нет IE9 на этой машине - завтра попробую еще раз посмотреть на ПК, который работает, но я сразу же подумал, что валидатор w3c скажет, что ваш HTML неверен.

Не нравится тот факт, что ваш текст находится непосредственно в ТЕЛЕ, а не в каком-то другом контейнере.Мне просто интересно, было ли это проблемой?Возможно, другие браузеры «исправляют» от вашего имени и принимают контейнер абзаца.

Изменится ли внешний вид, если вы поместите текст внутри абзаца или DIV?

0 голосов
/ 21 ноября 2011

Я всегда обнаруживал, что наиболее полезный способ установить размер шрифта в браузерах - использовать значения em, а не px.

Я склонен устанавливать базовую точку в теге body в CSS:

font-size: 62.5%

Тогда всякий раз, когда я хочу установить размер шрифта, я использую значение em, например:

font-size: 1.1em;

Это равняется 11px.Преимущество, которое я обнаружил, заключается в том, что он рендерится более последовательно во всех браузерах, а также лучше изменяет размеры с помощью элементов управления изменением размера браузера.

Попробуйте - я думаю, это должно решить вашу проблему.

Спасибо nathj07

0 голосов
/ 15 ноября 2011

Вы можете сослаться на статью Microsoft.может быть проблема, потому что Рендеринг текста

0 голосов
/ 23 июля 2011

humeniuc

Вы уверены, что используете шрифт по умолчанию или другой? Это может вызвать проблему

...