我想首先说我已经阅读了关于这个问题的另一篇或两篇文章,但他们都没有真正解决我的问题。我仅在页面刷新时出现显示问题。意思是,当您刚刚访问该页面时,该页面可以正常加载,但是当您刷新该页面时,它的布局将不正确。
其他线程上提供的解决方案涉及在锚中使用块级元素的问题。我没有锚,我有这个问题。
这是错误的 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生成的。我无法想象这会影响它,但它可能吗?