Рендеринг текста между OS X и Windows сбрасывает мои отступы?

Привет, ребята, я пытаюсь стилизовать статью клиента h1 с простым цветом фона и отступом. Мне нужно, чтобы текст был центрирован по вертикали и горизонтали внутри заполнения, но я обнаружил, что между OS X и Windows существует базовая разница. По крайней мере, это мое лучшее предположение. Вот конкретный код для оскорбительных элементов:

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

Вот скриншоты:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

Вы заметите, что он отлично отображается в Windows, но на несколько пикселей выше в OS X. Они отображают одинаково во всех браузерах, единственная разница заключается в разных операционных системах. Шрифт Quicksand Book реализуется через @font-face. Если вам нужно увидеть рабочую версию сайта, она доступна по адресу http://angryg.nom.es/rosebud. Если вам удастся проверить это, вы заметите, что у меня та же проблема с нижним колонтитулом статического контента в нижней части домашней страницы.

В любом случае, любая помощь будет принята с благодарностью.


text padding css baseline
person Kyle Foster    schedule 19.03.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

Кроме того, все еще на Mac, между Safari и Firefox вы заметите разницу между высотой строки! Так что это не просто OSX против Windows.

person jackJoe    schedule 19.03.2011

arrow_upward
2
arrow_downward

Ваши файлы шрифтов могут быть неверными.
У меня была такая же проблема с локальным установленным веб-шрифтом. К счастью, Google предоставил тот же шрифт, что и веб-шрифт, что решило мою проблему.

person alexdeloy    schedule 13.12.2012

arrow_upward
0
arrow_downward

Шрифт по умолчанию в операционных системах отличается, поэтому добавьте font-family: Arial к своим элементам css. Он должен работать в OSX и Windows, потому что Arial поддерживается ими обоими.

person Fatih Acet    schedule 19.03.2011
comment
Это может поддерживаться, но, например, высота строки обрабатывается по-разному в ОС и браузерах! :( - person jackJoe; 19.03.2011