Das Design

Der Inhalt der Info-Widgets sollte in der Mitte vertikal ausgerichtet sein:

Das codierte DesignWindows: Chrome 20 / FF 14 / IE 9

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

Der CodeHTML

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

Die Angelegenheit

Wenn Sie sich die obigen Bilder des codierten Designs ansehen, können Sie sehen, wie es aussieht, als würde es die Ausrichtung beeinträchtigen. Bei der weiteren Anzeige wird der Text außerhalb des Elements auf dem Mac gerendert.

Windows

Mac

Hinweis

Ich binde die Schriftarten über ein Google Web Fonts-Stylesheet ein.

Geprüft

Ich habe Folgendes versucht:

Stellen Sie die Zeilenhöhen für jedes Element ein.Stellen Sie die Schriftstärken für jedes Element ein.Stellen Sie die Höhe für jedes Element ein.Eine Kombination aus Höhe und Polsterung für jedes Element.Verwendete Prozentsätze / em / px zum Auffüllen.

Es scheint, dass der Inhalt, egal was ich versuche, nie perfekt zwischen Mac und PC zentriert wird.

Meine Fragen)

Ist es möglich, das, was ich versuche, auf vereinfachte Weise zu erreichen?

Sollte ich auf das verzichten?display:table-cell; für jedes Element und jedes Kind eine bestimmte Höhe / Polsterung festlegen und festlegen? Ich werde immer noch auf Auffüllungs- / Abstandsprobleme zwischen den beiden Betriebssystemen stoßen.

Unter welcher Kategorie sollte ich dieses Problem einordnen? Zeilenhöhe? Tabellenzellen? OS? usw...

Danke im Voraus!