（一）margin-top失效
先看下面代码：
<div>
<div class="box1"
>float:left</div>
<div class="box2">clear:both;
margin-top:20px;</div>
</div>
两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" target="_blank" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <a href="http://www.blue1000.com/bkhtml/c21/" target="_blank" title="XML教程">XML</a>ns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox下margin-top问题</title>
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" target="_blank" title="CSS教程">CSS</a>">
<!--
* {
margin:0;
padding:0;
}
.box1{
float:left;
width:500px;
height:100px;
background:#999;
}
.box2{
margin-top:20px;
width:500px;
height:50px;
background:#000;
color:#fff;
clear:both;
}
-->
</style>
</head>
<body>
<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>
</body>
</html>
网上能找到的两种比较靠谱的解释：1：“在css2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”2：当第一个层浮动，而第二个没浮动层的margin会被压缩
，详见--浮动元素后非浮动元素的margin的处理（ 地址 ）。
得到解决问题思路：要浮动一起浮动，要就一起不浮动。
解决办法：
1.box2增加float属性
2.box1与box2之间增加一层"<div
style="clear:both;"></div>"
（二）子元素设置margin-top作用于父容器
<div class="box"
style="height:100px;background:red;">
<div
class="box2">clear:both;
margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>
当给box2设置margin-top时，在FF下仅作用于父容器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox下margin-top问题</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.box2{
margin-top:20px;
width:500px;
height:50px;
background:#000;
color:#fff;
}
-->
</style>
</head>
<body>
<div class="box" style="height:100px;background:red;">
<div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>
</body>
</html>
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
分享到：
相关推荐
Firefox下margin-top 会将上级DIV也往下移.
定位层被遮的问题，特别是在火狐和IE的区别
最近发现好多用margin-top实现的，上边距效果一直没有，一直都不知道什么原因，今天偶然看到了，特分享给大家
之前未解决兼容火狐的问题， 要兼容火狐请代码中XMLHttp.readystate=4更改为XMLHttp.readyState=4 另var key=lis[i].innerHTML.substring(0,lis[i].innerHTML.indexOf("<SPAN>"));这一行更改为： var key=lis[i]....
JavaScript事件监听完整实例（含注释） * { margin:0px; padding:0px; } ...margin-top:4px; border:solid 1px blue; width:100px; float:left; } pre{ margin:20px 0 0 0; } a { text-indent:4em;
对单个元素可以直接 element.style.display=……修改一个样式，也可以 element.className=…修改它的多个样式。 对于多个元素修改样式可以用脚本直接 ...} input{background-color:gray} button{margin-top:70px;
一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用 vertical-align、padding和margin等都不行（特别是在IE中，Firefox中使用...
复制代码代码如下: <style type=”text/css”> body{font-size:24px; font-family:Tahoma;...在实际运用中会出现firefox与ie效果不同的情况这时候需要 复制代码代码如下: .comm_check{margin:2px
jQuery中animate()的方法 ...params 对象{},注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果使用的是“hide”、 “show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
掌握文本控制相关的属性 掌握CSS属性继承的概念并能够合理应用 掌握背景控制相关的CSS属性 掌握列表相关的CSS属性 熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用 了解常见的CSS设计技巧（CSS Hacks）和设计...
代码如下: $(function () { if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之类浏览器 $(“.productli img”).each(function () { var margin = 120 – $(this).height();...
本文我们制作一下子栏目资讯内容，供大家参考，具体内容如下 谷歌浏览器解析的顺序调整，需要全部加载后执行 ...注：对于 Firefox 浏览器，可以按 Ctrl+Shift+M，调整移动端尺寸。 子栏目标题 <hgroup>
功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性...
-修正了Firefox下Zoom In/Out时页面消失的BUG。 -删除Panel的EnableLightBackgroundColor属性，同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton...
margin: 0 auto; border: solid 1px #d4d0c8; } .winUI tr td, .winUI thead td, tfoot td { border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; border-bottom: 1px solid ...
:warning: 未维护！ 在浏览器实现position: sticky时，Stickyfill表现... 仅适用于具有指定top元素模仿本地的top和margin-bottom行为， 与表格单元格一起使用为了保持一致性，删除了该文件，直到Firefox它没有不支持
.testCaseLink, .testCaseLinkSelected { margin-top: 2px; padding: 4px; cursor: pointer; } .testCaseLink { background-color: #f6f6f6; } .testCaseLinkSelected { background-color: lightblue; border: ...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性...
border-top:1px #000 solid; } #table ul { margin:0px; padding:0px; width:701px!important; width /**/:700px; list-style-type:none; border-bottom:0px #000 solid; border-left:0px #000 solid; } #table li ...