У меня есть страница, которая отображает ok, в 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>
Возможно, это связано с округлением вверх/вниз. Использование десятых долей пикселя - это странная вещь, потому что вы не можете получить меньше, чем целый пиксель на экране, если не знаете, как будет округлено. Вы не можете полагаться на IE, чтобы все было в порядке.
Попробуйте это, как это работает с Internet Explorer 8 и Firefox:
letter-spacing:0.49px;
letter-spacing:0.88px !ie;
MSIE заполняет первое расстояние между буквами до 0px и игнорирует второе правило. Firefox будет читать второе правило и использовать его вместо первого правила.
Затем, чтобы скомпенсировать, вы можете использовать один и тот же трюк и добавить более горизонтальное дополнение к вашему тексту в MSIE, что вы даете в Firefox.
Конечно, проводите дополнительные тесты с другими браузерами!
Еще одна вещь, которую стоит рассмотреть сейчас, когда прошло семь месяцев с тех пор, как вы задали этот вопрос, заключается в том, что начиная с июня 2011 года версия 5 FireFox начала быстрое расписание релизов. Они теперь до версии 8 и в качестве быстрого теста, я вижу, что версии 7 и 8 FireFox обе делают текст почти идеальным для пикселя с IE9. Хром кажется "скрюченным" по сравнению с тем, что кернинг намного плотнее, а рендеринг четкого типа в Chrome (на мой взгляд) более суровый, чем IE9 и FF7/8.
Вам не гарантируется кросс-браузерное сопоставление шрифтов, не говоря уже о кросс-платформенном. Во всех браузерах я смотрел по умолчанию (в Windows) Times New Roman, 16pt текст для "нормального" отображения. Если вашему приложению требуется рендеринг текста до уровня соответствия для всех пользователей, все браузеры, все платформы, а затем отображать его как изображение и кэшировать его.
Попробуйте установить letter-spacing значение для всего документа, поэтому оно будет отображаться одинаково в IE и FF.
Это также происходит со мной в IE8 по какой-то причине. Ни уменьшение размера шрифта, ни настройка расстояния между буквами не помогли решить проблему.
В другом потоке я увидел, что это может быть связано с font-face. К сожалению, я еще не нашел решение, но как только найду его, я отправлю его здесь. Может не помочь вам в это время, но это может помочь людям, которые позже обращаются к этому вопросу.
humeniuc
Вы уверены, что используете шрифт шрифта по умолчанию или используете некоторые другие? Это может вызвать probl
Вы можете ссылаться на статью Microsoft. может быть проблемой, потому что Text Rendering
Я всегда обнаружил, что самый полезный способ установить размер шрифта в браузерах - это использовать значения em not px.
Я пытаюсь настроить базовую точку в теге body в CSS:
font-size: 62.5%
Затем, когда я хочу установить размер шрифта, я использую значение em, например:
font-size: 1.1em;
Это соответствует 11px. Преимущество, которое я обнаружил, заключается в том, что он обеспечивает более последовательное взаимодействие между браузерами и улучшает его размер с помощью элементов управления размером браузера.
Попробуйте попробовать - я думаю, он должен решить вашу проблему.
Спасибо nathj07
Боюсь, что у меня нет IE9 на этой машине - попробуем снова посмотреть завтра на ПК, который делает, но я сразу подумал, что валидатор w3c говорит, что ваш HTML недопустим.
Не нравится, что ваш текст находится прямо в BODY и не находится в каком-либо другом контейнере. Я просто подумал, что это проблема? Возможно, другие браузеры "исправляют" от вашего имени и принимают контейнер абзаца.
Изменяется ли внешний вид, если вы помещаете текст внутри абзаца или DIV?