浮动和内联阻止有时在Webkit中不起作用 [英] Float and Inline-block doesn't work sometimes in webkit

问题描述

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

I detect a problem that affects divs positioned in columns with float and with display: inline-block. Let me show two examples:

在第一种情况(左)中，名称"Altair"和按钮"Log-Out"位于显示内联块中.期望的结果显示在第一行，第二行显示当我使用JQuery动态修改div的内容时总是发生的情况.当我第一次写所有的html时，都是正确的.

In the first case (left) the name "Altair" and the button "Log-Out" are positioned with display inline-block. The desired result is shown in the first row, what happens ALWAYS when I modify the content of the div dynamically with JQuery is shown in the second row. When I write all the html the first time all is correct.

在另一种情况(右)中，数字"21"的位置为f​​loat:向左，然后按月份和年份.在这种情况下，总是使用JQuery插入内容，并且刷新页面时，第二行中显示的问题仅在SOMETIMES出现. 5次中的1次，或多或少.

In the other case (right) the number "21" is positioned with float: left and then pushes the month and the year. In this case the content is always inserted with JQuery and the problem shown in the second row only appears SOMETIMES, when I refresh the page. 1 of 5 times, more or less.

如您所见，Chrome控制台表示div的宽度为0px，这可能是引发问题的原因.我可以在Safari中重现第一种情况(左)，但不能重现其他情况(右).我无法在Firefox和Opera中重现错误，然后我认为这与Webkit有关.

As you can see, Chrome console says that the div has 0px of width, and probably this is what triggers the problem. I can reproduce the first case (left) in Safari, but not the ohter (right). I can't reproduce the errors in Firefox and Opera, then I suppose that is something related with Webkit.

您知道发生了什么事吗，我能解决这个问题吗?谢谢您的关注.

Do you know what is happening and can I solve this? Thank you for your attention.

HTML和CSS第一种情况:

HTML and CSS first case:

<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*/
}

推荐答案

似乎是Webkit错误.幸运的是，可以通过强制Webkit重新绘制元素来解决该问题.正如此问题做到这一点的技巧是使用以下简单的javascript代码:

Seems that this is a Webkit bug. Fortunelly, it can be solved by forcing webkit to repaint the element. As pointed in this question a trick to do this is with this simple javascript code:

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

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

If someone find a better solution I would mark it as the correct answer, but at the moment this works and could help other people with the same problem.

这篇关于浮动和内联阻止有时在Webkit中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！