Question

我还是比较新的CSS，但经过大量的Stack Overflow阅读后，我已经想出了如何在面板中添加“标题”。好的，去吧。但我遇到的问题是我的某个面板特别是在Firefox中无法正常呈现。我一直在Chrome中进行所有开发工作，我刚才注意到了这个问题。奇怪的是，我能够将我的“标题”（可能更好地称之为div包装？）添加到其他面板并且它们看起来很好 - 它只是1个面板给我提出了一些我无法弄清楚的问题为什么。要了解我的意思，请查看Firefox和Chrome中的http://www.mobiuspc.com。有问题的难题是标题“系统构建区” - Firefox中的蓝绿色边框随处可见，而在Chrome中它可以正常显示。

这是困难小组的CSS：

.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}

.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}

以下是适用于两种浏览器的不同面板的CSS：

.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}     

.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}

除了我的绝对定位（还在学习如何漂浮东西），对我来说，有问题的面板和完美面板之间的CSS看起来是一样的吗？

作为参考，IE看起来也很好（除了慢速Javascript执行）。

Answer 1

margin-top也需要.droparea为负数。

Answer 2

似乎有点过于复杂。如果 - 例如 - 您将 filterboxareaparent 向左浮动，则 dropboxareaparent 上不需要大的负余量。

我尝试以更合理的方式定位元素，以便不同浏览器的结果更加一致。

firefox和;之间的DIV问题;铬

2 个答案: