Рендеринг шрифтов/проблема с высотой строки на Mac/ПК (вне элемента) ⇐ CSS

[Anonymous]

Дизайн

Содержимое информационных виджетов должно быть выровнено вертикально посередине:

< img alt="Оригинальный PSD-дизайн" src="https://i.sstatic.net/BY9V7.png" />



Кодированный дизайн

Windows: Chrome 20 / FF 14 / IE 9




Mac (Lion / Mt. Lion): Chrome / FF





Код

HTML

Код: Выделить всё

[img]imgs/icons/thunderstorms.png[/img]

82° / 89°
Thunderstorms



11:59 AM

23
Jun
Sat

CSS

Код: Выделить всё

.info {
display:table;
border-spacing:20px 0;
margin-right:-20px;
padding:6px 0 0;
}
.display {
background-color:rgba(255, 255, 255, .2);
border-radius:10px;
-ms-border-radius:10px;
color:#fff;
font-family:"Cutive", Arial, sans-serif;
display:table-cell;
height:70px;
vertical-align:middle;
padding:3px 15px 0;
}
.display p {padding:0;line-height:1em;}
.time, .date {padding-top:5px;}
.time p, .date .number {font-size:35px;}
.time span, .display .month-day, .conditions {
font-size:14px;
text-transform:uppercase;
font-family:"Maven Pro", Arial, sans-serif;
line-height:1.15em;
font-weight:500;
}
.display .month-day {padding-left:5px;}
.icon {float:left;padding:0 12px 0 0}
.display .temperature {font-size:24px;padding:4px 0 0;}
.display .conditions {text-transform:none;padding:2px 0 0;}
.lt-ie9 .display { /* IE rgba Fallback */
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
zoom:1;
}

Проблема

Глядя на приведенные выше изображения закодированный дизайн, вы можете увидеть, как он нарушает выравнивание. При дальнейшем просмотре текст отображается за пределами элемента на Mac.

Windows




Mac




< hr />

Примечание

Я встраиваю шрифты через таблицу стилей Google Web Fonts.



Проверено

Я пробовал следующее:

• Установить высоту строк для каждого элемента.
• Установить толщину шрифта для каждого элемента.
• Установите высоту для каждого элемента.
• Комбинация высоты/отступа-top для каждого элемента.
• Используются проценты/em/px для заполнения.

Похоже, что бы я ни старался, контент никогда не будет идеально выровнен по центру на Mac и ПК.



Мой вопрос(ы)

То, что я хочу, можно достичь пытаетесь сделать упрощенно?

Должен ли я отказаться от маршрута display:table-cell; и установить определенные высоты/отступы для каждого элемента и дочернего элемента? Я по-прежнему буду сталкиваться с проблемами заполнения/промежутков между двумя ОС.

К какой категории мне следует отнести эту проблему? Высота линии? Табличные ячейки? ОПЕРАЦИОННЫЕ СИСТЕМЫ? и т. д...

Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/117 ... of-element