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

Question

首先我想说的是，我在这里读过一两篇关于这个问题的帖子，但它们都没有真正解决我的问题。我仅在页面刷新时遇到显示问题。这意味着，当您刚刚访问该页面时，该页面可以正常加载，但是当您刷新页面时，它的布局就会不正确。

其他线程提供的解决方案涉及在 anchor 内使用 block 级元素的问题。我没有 anchor ，我遇到了这个问题。

这是错误的 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。我对这种行为感到非常困惑，不知道如何补救。

附言页面上还有其他几个地方使用了几乎完全相同的 HTML/CSS，并且一切正常，但是那些地方有固定的宽度。

感谢任何帮助。

编辑:

我对一些答案和评论有一个全局性的回应，所以我将在这里编辑帖子:

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

此外，我不知道它是否有任何影响，但我使用 xhtml 1.0 作为我的文档类型。另外值得注意的是，大部分内容，包括这部分内容都是用 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;
}