Firefox 和 chrome 之间的 DIV 问题

Question

我对 CSS 还比较陌生，但是在阅读了大量 Stack Overflow 之后，我已经弄清楚了如何将“标题”添加到面板中。耶，去我吧。但我遇到的问题是我的一个面板特别不能在 Firefox 中正确呈现。我一直在 Chrome 中做所有的开发工作，我现在才注意到这个问题。奇怪的是，我可以将我的“标题”（可能更好地称为 div 包装器？）添加到其他面板，它们看起来很好 - 它只是一个面板给我带来了我无法弄清楚的问题为什么。要了解我的意思，请查看 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

对于.droparea，您还需要一个否定的margin-top。

Answer 2

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

我会尝试以更合乎逻辑的方式定位元素，以便结果在不同浏览器之间更加一致。