1

float我检测到一个问题，该问题会影响位于 with和 with列中的 div display: inline-block。让我举两个例子： 在此处输入图像描述

在第一种情况下（左），名称“Altair”和“Log-Out”按钮与 display inline-block 一起定位。所需的结果显示在第一行中，当我使用 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*/
}
4

1 回答 1

0

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

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

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

于 2012-11-21T11:05:31.900 回答