浮动和内联块有时在 webkit 中不起作用答案

【问题标题】：Float and Inline-block doesn't work sometimes in webkit浮动和内联块有时在 webkit 中不起作用
【发布时间】：2012-11-09 13:11:27
【问题描述】：

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

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

在另一种情况下（右），数字“21”用 float:left 定位，然后推动月份和年份。在这种情况下，始终使用 JQuery 插入内容，并且当我刷新页面时，第二行中显示的问题仅出现有时。 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*/
}

【问题讨论】：

我们可以看看一些代码吗？
请发布您的 html 和 css 标记
我在某处闻到position:absolute
我用代码编辑了条目。我之前没有发布它们，因为我感谢一切都很正常......这个小部件的所有内部代码中都没有position:absolute或position:relative。但是每个小部件容器都是position:relative。
顺便说一下，继承属性是纯粹的 stetical (font, lineHeight, color...)。

标签： jquery css google-chrome safari webkit

【解决方案1】：

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

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

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

【讨论】：