Float和inline-block的不webkit的工作有时(Float and Inline-b

余检测影响定位成与列的div一个问题float并与display: inline-block 。 让我给两个例子：

在第一种情况（左）以名称“牵牛星”和按钮“注销”位于与显示内联块。 所期望的结果被示出在第一行中，当我修改第二行中示出在div动态使用jQuery的内容是什么总是会发生。 当我写的所有的HTML在第一时间全部是正确的。

在其他情况下（右）“21”的个数为定位浮动：左，然后推月份和年份。 在这种情况下，内容始终插入jQuery和第二行中所示的问题，只有当我刷新页面出现有时。 1 5次，更多或更少。

正如你所看到的，镀铬控制台说，div有宽度的0像素，大概这是什么触发的问题。 我可以在Safari重现第一种情况下（左），而不是ohter（右）。 我无法重现在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重绘元素来解决。 正如指出的这个问题，一招就是使用这个简单的JavaScript代码：

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

如果有人找到一个更好的解决方案，我将其标记为正确的答案，但目前这一工作并能帮助其他人同样的问题。

文章来源: Float and Inline-block doesn't work sometimes in webkit