0

我想首先说我已经阅读了关于这个问题的另一篇或两篇文章，但他们都没有真正解决我的问题。我仅在页面刷新时出现显示问题。意思是，当您刚刚访问该页面时，该页面可以正常加载，但是当您刷新该页面时，它的布局将不正确。

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

这是错误的 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 中刷新页面。发生的情况是，第二个单词，在这种情况下，“名称”被推到一个新行，在整个 div 下方。即使检查元素也显示 div“作业”的宽度从其正确的 192 像素宽度缩小到 164 像素。我对这种行为完全感到困惑，不知道如何解决这个问题。

PS 页面上还有其他几个地方使用了几乎完全相同的 HTML/CSS，并且它们都可以完美运行，但是它们具有固定的宽度。

任何帮助表示赞赏。

编辑：

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

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

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

4

3 回答 3

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;
}
于 2013-07-02T02:29:00.443 回答
0

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

如果您无法复制问题，那么您就知道您的缓存页面出了问题。

于 2013-07-02T02:14:41.053 回答
0

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

在此处输入图像描述

于 2013-07-02T02:15:17.027 回答