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 回答