jquery - Webkit で Float と Inline-block が機能しないことがある

Question

floatおよび を使用して列に配置された div に影響する問題を検出しましたdisplay: inline-block。2 つの例を示します。

最初のケース (左) では、「Altair」という名前と「ログアウト」ボタンが表示インラインブロックで配置されています。目的の結果は最初の行に表示され、div のコンテンツを JQuery で動的に変更すると常に何が起こるかが 2 行目に表示されます。初めてすべてのhtmlを書くとき、すべてが正しいです。

他のケース (右) では、数値 "21" が float: left で配置され、月と年がプッシュされます。この場合、コンテンツは常に JQuery で挿入され、2 行目に示されている問題は、ページを更新したときにのみ表示されます。5回に1回、多かれ少なかれ。

ご覧のとおり、Chrome コンソールは div の幅が 0px であると表示しており、おそらくこれが問題の原因です。最初のケース (左) は Safari で再現できますが、別のケース (右) は再現できません。Firefox と Opera でエラーを再現できません。これは Webkit に関連していると思われます。

何が起こっているか知っていますか？これを解決できますか？ご清聴ありがとうございました。

HTML と CSS の最初のケース:

<div id="login-widget" class="widget">
    <div class="name"></div>
    <div class="button in">
        <div class="value">Log - Out
        </div><div class="decorator"></div>
    </div>
</div>

#login-widget .name {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
#login-widget .button {
    border: solid 1px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

他の場合の HTML と CSS:

<div class="date">
    <div class="day"></div>
    <div class="month"></div>
    <div class="year"></div>
</div>

#agenda-widget .date {
    margin: 0;
    font-size: 12px;
}
#agenda-widget .day {
    font-size: 45px;
    line-height: 36px;
    color: #DB443F;
    float: left;
    margin-right: 5px;
}
#agenda-widget .month {
    padding-top: 12px;
}
#agenda-widget .year {
    /*nothing*/
}