Почему Chrome и Opera игнорируют мой межбуквенный интервал: 0.03em;?

Итак, любая идея, почему Chrome (17.0.963.79) и Opera (12.12) игнорируют мой «межбуквенный интервал: 0,03 em;» в основной текст? В то время как в Мозилле и IE это работает.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />
    <title>test page</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font: normal 100%/1.375  Georgia, serif;
        }
        html { background-color: #333; }
        body { 
            margin: auto; 
            max-width: 75em;
            padding-top: 1.375em;
            background-color: #fff;  
            }
        h1 {
            font-weight: normal;
            word-spacing: -0.05em;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            }
    </style>
</head>

<body>

    <h1>Hello World</h1>

</body>

</html>

browser google-chrome html css letter-spacing
person Jack    schedule 14.02.2013    source источник
comment
Без того, чтобы вы разместили какой-либо код, довольно сложно сказать.   -  person jmoerdyk    schedule 15.02.2013
comment
В качестве общего комментария: не ожидайте, что все браузеры будут одинаково отображать тонкости. Браузеры имеют разные интерпретации, ошибки и причуды, которые становятся более заметными, чем дальше вы отклоняетесь от простых объявлений. Например, когда вы говорите «IE работает», каждая версия IE «работает» очень по-разному.   -  person sscirrus    schedule 15.02.2013
comment
Вы имеете дело с вычислением субпикселей и рендерингом. Результаты могут и будут различаться; даже дисплей устройства (например, дисплей с высоким разрешением) может повлиять на конечный результат.   -  person Tim Medora    schedule 15.02.2013
comment
См. также: stackoverflow.com/questions/7811225/. Похоже, это ошибка в webkit.   -  person Tim Medora    schedule 15.02.2013
comment
Ага... Я понял. Спасибо, Тим.   -  person Jack    schedule 15.02.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я попробовал ваш код в Chrome (версия 24.0.1312.57 m) с экраном 1680×1050. Когда я переключался между вашими letter-spacing: 0.03em; и letter-spacing: 0.0em;, он выглядел одинаково при размере по умолчанию, но когда я увеличивал масштаб на один уровень (CTRL +), текст 0,03 em отображался шире, чем текст 0,0 em.

Итак, я вижу несколько возможных ответов на ваш вопрос:

  • При уровне масштабирования по умолчанию (CTRL 0) межбуквенный интервал 0,03 em недостаточно широк, чтобы показать какую-либо разницу, но уровень масштабирования +1 (CTRL +) показывает разницу.
  • Возможно, ваш Chrome более низкого уровня (17.0.963.79) не обрабатывает субпиксель letter-spacing: [tiny]em; так же хорошо, как Chrome (24.0.1312,57 m).
  • Возможно, разрешение вашего экрана недостаточно велико, чтобы увидеть разницу.
person Steve    schedule 17.02.2013
comment
Проверял на разрешении экрана 1600х900 и 1920х1080. действительно работает, но мне пришлось установить уровень масштабирования +2 - person Jack; 19.02.2013
comment
Интересно. Я думаю, что часть ответа заключается в том, что sscirrus написал в комментарии к исходному вопросу: рендеринг различается в разных браузерах. Очевидно, что это верно для разных браузеров и для разных основных версий браузеров, но, вероятно, также верно для младших версий и даже для одного и того же браузера с разными видеодрайверами и т.п. - person Steve; 11.07.2014