Chrome刷新后显示的布局不正确，为什么？

Question

我想首先说我已经在这里读了另外一两篇关于这个问题的帖子，但是他们都没有解决我的问题。我只在页面刷新时出现显示问题。这意味着，当您刚访问该页面时，页面会正常加载，但是当您刷新页面时，它的布局将会不正确。

其他线程提供的解决方案涉及在锚点内使用块级元素的问题。我没有锚，我有这个问题。

这是错误的HTML：

<div class="job" style="background:#a13b3b;">
    <div class="jobd" style="background:#802f2f;">
        J
    </div>
    Job Name
</div>

以下是CSS：

.job {
    height:24px;
    line-height:24px;
    color:#FFFFFF;
    padding-right:4px;
    display:block;
    float:left;
    margin-right:2px;
    margin-bottom:2px;
}

.jobd {
    display:block;
    height:24px;
    width:24px;
    line-height:24px;
    text-align:center;
    float:left;
    margin-right:4px;
}

正如我所说，它在IE，FF甚至Chrome中运行良好，直到我用chrome刷新页面。会发生什么，第二个词，在这种情况下，“name”被推到一个新的行，在整个div下面。即使检查元素，也会显示div“job”的宽度从正确的192px宽度缩小到164px。我完全被这种行为所困惑，并且不知道如何解决这个问题。

P.S。在页面上还有其他几个地方几乎使用完全相同的HTML / CSS，它们都完美无缺，但那些设置宽度。

感谢任何帮助。

编辑：

我对几个答案和评论进行了全球回复，因此我将在此处编辑帖子：

这是多个页面上的问题，对于其他用户（我无法链接，因为它受登录限制）但我无法在其他页面上复制它，这会让我相信它与我的其他页面有关元素。但是，如果我拿出除了这部分之外的所有东西，我仍然有问题。我将清除除了这些div之外的所有内容，重新加载页面，并且我遇到了所有其他内容的问题。但是，如果我直接转到页面，它只加载这些div，并正确加载。

另外，我不知道它是否有任何后果，但我使用的是xhtml 1.0作为我的doctype。值得注意的另一件事是，大部分内容，包括这部分都是用php生成的。我无法想象会影响它，但它可能会吗？

Answer 1

尝试JSBIN

.job {
    height:24px;
    line-height:24px;
    color:#FFFFFF;
    display:inline-block;
    padding-right: 4px;
    margin-right:2px;
    margin-bottom:2px;
    white-space: nowrap;




}

.jobd {
    display:block;
    height:24px;
    width:24px;
    line-height:24px;
    text-align:center;
    float:left;
    margin-right:4px;
}

Answer 2

可能页面已缓存。在像JSFiddle这样的东西上尝试相同的事情，看看你是否可以复制问题。如果是这样，那么它与标记有关，我不明白为什么它应该是完美的。

如果您无法复制问题，那么您就会知道缓存页面的某些内容。

Answer 3

您使用的是哪个版本？我在Mac OS X上使用27，无论我刷新多少次，它对我来说都很好。也许你应该尝试清除缓存？