Дизайн

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

---

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

Windows :Chrome 20 / FF 14 / IE 9

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

---

Кодекс

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

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.

Окна

Мак

---

Примечание

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

---

Проверено

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

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

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

---

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

Можно ли добиться того, что я пытаюсь сделать упрощенным способом?

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

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

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