Firefox 和 Firefox 之间的 DIV 问题铬合金
我对 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 执行速度慢之外）。
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.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;
}
Here is the CSS to a different panel that is working great in both browsers:
.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;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
似乎有点过于复杂了。例如，如果您将 filterboxareaparent 向左浮动，则 dropboxareaparent 上不需要较大的负边距。
我会尝试以更符合逻辑的方式定位元素，以便结果在不同浏览器中更加一致。
It seems a bit over-complicated. If - for example - you float your filterboxareaparent left, there is no need for large negative margin on dropboxareaparent.
I'd try to position the elements in a more logical way so the results will be more consistent across different browsers.
您还需要为
.droparea指定一个负的margin-top。You need a negative
margin-topfor.dropareaas well.