Float和Inline-block有时在webkit中不起作用
我检测到一个问题，影响位于列中的div与float和display: inline-block 。 让我举两个例子： 
在第一种情况（左）中，名称“Altair”和“Log-Out”按钮位于显示内联块中。 所需的结果显示在第一行，当我用JQuery动态修改div的内容时，总是会发生什么，如第二行所示。 当我第一次写完所有的html时，一切都是正确的。
在另一种情况下（右），数字“21”定位为float：left，然后推动月份和年份。 在这种情况下，内容总是与JQuery一起插入，当我刷新页面时，第二行中显示的问题仅显示为SOMETIMES。 5次中的1次，或多或少。
正如您所看到的，Chrome控制台说div的宽度为0px，这可能就是触发问题的原因。 我可以在Safari中重现第一个案例（左），但不能重现哦（右）。 我无法重现Firefox和Opera中的错误，那么我认为这与Webkit有关。
你知道发生了什么吗？我可以解决这个问题吗？ 感谢您的关注。
HTML和CSS第一种情况：
#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：
#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*/ }
似乎这是一个Webkit错误。 Fortunelly，它可以通过强制webkit重新绘制元素来解决。 正如这个问题所指出的，使用这个简单的javascript代码可以做到这一点：
sel.style.display='none'; sel.offsetHeight; // no need to store this anywhere, the reference is enough sel.style.display='block';
如果有人找到了更好的解决方案，我会将其标记为正确的答案，但目前这有效，可以帮助其他人解决同样的问题。