首先我想说的是,我在这里读过一两篇关于这个问题的帖子,但它们都没有真正解决我的问题。我仅在页面刷新时遇到显示问题。这意味着,当您刚刚访问该页面时,该页面可以正常加载,但是当您刷新页面时,它的布局就会不正确。
其他线程提供的解决方案涉及在 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 生成的。我无法想象这会影响它,但它可能会?
最佳答案
尝试 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;
}
关于html - 刷新后 Chrome 显示布局不正确,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17416363/