Float和Inline-block有时在webkit中不起作用

Question

我检测到影响位于float和display: inline-block列的div的问题。让我举两个例子：

在第一种情况（左）中，名称“Altair”和“Log-Out”按钮位于显示内联块中。所需的结果显示在第一行，当我用JQuery动态修改div的内容时，总是会发生什么，如第二行所示。当我第一次写完所有的html时，一切都是正确的。

在另一种情况下（右），数字“21”位于float：left，然后推动月份和年份。在这种情况下，内容总是与JQuery一起插入，当我刷新页面时，第二行中显示的问题只出现SOMETIMES。 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*/
}

Answer 1

似乎这是一个Webkit错误。 Fortunelly，它可以通过强制webkit重新绘制元素来解决。正如this question中所指出的，使用这个简单的javascript代码就可以做到这一点：

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

如果有人找到了更好的解决方案，我会将其标记为正确的答案，但目前这有效并可以帮助其他人解决同样的问题。