常出现两种情况:
(一)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没有效果。

网上能找到的两种比较靠谱的解释: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下仅作用于父容器。

解决办法:

1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top

关于margin-top失效的解决方法的更多相关文章

  1. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  2. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  3. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  4. ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

    今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...

  5. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  6. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  7. IIS上发布站点后URL重写失效的解决方法

    在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...

  8. CentOS忘记密码修改方案以及centos卡在开机登录界面,命令失效的解决方法

    CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定 ...

  9. UEditor设置内容setContent()失效的解决方法

    ueditor常见用法: https://blog.csdn.net/qq_31879707/article/details/54894735#UE.Editor:setContent() UEdit ...

  10. IE8下String的Trim()方法失效的解决方法

    String的Trim()方法失效,在ie8下是有这样的情况的,解决方法也很简单使用$.trim(str)即可,需要的朋友可以了解下 用jquery的trim()方法,$.trim(str)就可以了.

随机推荐

  1. 一点BPXA的思考

    懂的人自然懂... BPXA功能配置 这个概念现在还有印象,记录下来: 一,BPXA是用于BP使用第三方资源的.如使用ORACLE数据库,就是在XA里配置.它的特征是以<xa>开头 二,B ...

  2. WSS存储服务器(Windows Storage Server) 2012新功能解析

    虽然最近一段时间有关微软的新闻大多数集中在Windows 8以及Surface平板设备身上,但数周之前Windows Server 2012新版本中所包含的Windows Storage Server ...

  3. 【HDOJ】1885 Key Task

    状态压缩+BFS,一次AC. /* 1885 */ #include <iostream> #include <queue> #include <cstring> ...

  4. Linux Kernel 远程拒绝服务漏洞

    漏洞名称: Linux Kernel 远程拒绝服务漏洞 CNNVD编号: CNNVD-201307-309 发布时间: 2013-07-18 更新时间: 2013-07-18 危害等级:    漏洞类 ...

  5. 数学(快速数论变换):SDOI2015 序列统计

    [题目描述] 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列.但是小C有 ...

  6. 数据结构——N皇后放置方法种数

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  7. ARM机器码分析

    我们编写的汇编程序还是不够底层,CPU都是对机器码进行操作的,所以还需要用汇编器将汇编代码转换成机器码才能被CPU处理.下面举几个例子来说说分析ARM机器码的方法. 对编译连接之后得到的ELF进行反汇 ...

  8. PowerDesigner自定义Word导出格式

    本文主要讲解如何将PDM的表结构导出成word以及如何自定义导出格式和显示效果,希望对大家有所帮助...(以下步骤以PowerDesigner 15版本为例) 一.新建导出报表,进入报表设计界面: 1 ...

  9. [Audio processing] Harmonic change detection function (HCDF)

    Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...

  10. VMware: windows8 与 虚拟机ubuntu 14.04 共享文件夹

    假设当前用户为xxx 安装 VMwareTools 1. 打开 VMwareworkstation窗口,选择”虚拟机” -> “重新安装VMwareTools(T)”. 点击之后,会发现 Ubu ...