O design

O conteúdo dos widgets de informação deve estar verticalmente alinhado no meio como tal:

O design codificadoWindows: Chrome 20 / FF 14 / IE 9

Mac (Leão / Mt. Leão): Chrome / FF

O códigoHTML

<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;
    } 

O problema

Olhando para as imagens acima do desenho codificado, você pode ver como a aparência parece desalinhar o alinhamento. Após a visualização, o texto está sendo renderizado fora do elemento no mac.

janelas

Mac

Nota

Estou incorporando as fontes por meio de uma folha de estilos de fontes da web do Google.

Testado

Eu tentei o seguinte:

Defina alturas de linha em todos os elementos.Definir pesos de fonte em todos os elementos.Defina alturas em todos os elementos.Uma combinação de altura / topo de enchimento em todos os elementos.Percentagens usadas / em / px para preenchimento.

Parece que, não importa o que eu tente, o conteúdo nunca será alinhado perfeitamente no mac e no pc.

Minhas perguntas)

É possível conseguir o que estou tentando fazer de maneira simplista?

Devo renunciar aodisplay:table-cell; rotear e definir alturas / preenchimentos específicos em cada elemento e filho? Ainda vou me deparar com problemas de preenchimento / espaçamento entre os dois sistemas operacionais.

Como devo categorizar essa questão? Altura da linha? Células-de-mesa? OS? etc ...

Desde já, obrigado!