css - Firefox 和 Chrome 之间的 DIV 问题

Question

我对 CSS 还是比较陌生，但在大量阅读 Stack Overflow 之后，我已经弄明白了如何向面板添加“标题”。耶，走我。但我遇到的问题是我的其中一个面板无法在 Firefox 中正确呈现。我一直在 Chrome 中进行所有开发工作，现在才注意到这个问题。奇怪的是，我可以将我的“标题”(将其称为 div 包装器可能更好？)添加到其他面板，它们看起来不错 - 只有 1 个面板给我带来了我无法弄清楚的问题为什么。要明白我的意思，请查看 http://www.mobiuspc.com在 Firefox 和 Chrome 中。有问题的面板是标题“系统构造区”——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;
}

除了我的绝对定位(仍在学习如何 float 东西)之外，对我来说，有问题的面板和完美的面板之间的 CSS 似乎是一样的？

作为引用，IE 看起来也不错(除了 Javascript 执行速度慢)。

Answer 1

这似乎有点过于复杂了。例如，如果您将 filterboxareaparent 向左浮动，则无需在 dropboxareaparent 上设置较大的负边距。

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