关于margin-top失效的解决方法
常出现两种情况:
(一)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失效的解决方法的更多相关文章
- margin-top失效的解决方法
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...
- IE7的overflow失效的解决方法
IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法
今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- IE8下部分方法失效的解决方法
1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为 $.trim(_id) != ...
- IIS上发布站点后URL重写失效的解决方法
在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...
- CentOS忘记密码修改方案以及centos卡在开机登录界面,命令失效的解决方法
CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定 ...
- UEditor设置内容setContent()失效的解决方法
ueditor常见用法: https://blog.csdn.net/qq_31879707/article/details/54894735#UE.Editor:setContent() UEdit ...
- IE8下String的Trim()方法失效的解决方法
String的Trim()方法失效,在ie8下是有这样的情况的,解决方法也很简单使用$.trim(str)即可,需要的朋友可以了解下 用jquery的trim()方法,$.trim(str)就可以了.
随机推荐
- Door man
poj1300:http://poj.org/problem?id=1300 题意:给你n个房间,房间之间有一些门,房间是按0~~n-进行编号的.然后给出一些房间的之间门,n行,每行的数字表示该们与其 ...
- wpa_cli和wpa_supplicant使用,配置无线AP名和密码,静态ip地址
配置静态ip方法分享:通过串口命令行输入如下命令: 1. 添加无线网络接入点(AP) 及其 密码:# wpa_cli -p /data/misc/wpa_supplicantwpa_cli v0.5. ...
- 数据结构(堆):POJ 1442 Black Box
Black Box Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 10658 Accepted: 4390 Descri ...
- 【模拟】NCPC 2014 E ceremony
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1791 题目大意: N栋大楼(N<=100000),拆除的时候有两种选择的操作,可 ...
- Introduction to Glide, Image Loader Library for Android, recommended by Google
In the passed Google Developer Summit Thailand, Google introduced us an Image Loader Library for And ...
- bzoj1251 序列终结者(Splay Tree+懒惰标记)
Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...
- 《编写高质量代码——Web前端开发修炼之道》读后随笔
结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...
- 芭比娃娃 Barbara
芭比娃娃(芭比)是20世纪最广为人知及最畅销的玩偶,由Ruth Handler发明,于1959年3月9日举办的美国国际玩具展览会(American International Toy Fair)上首次 ...
- 《ACM国际大学生程序设计竞赛题解Ⅰ》——模拟题
这篇文章来介绍一些模拟题,即一类按照题目要求将现实的操作转换成程序语言. zoj1003: On every June 1st, the Children's Day, there will be a ...
- HDU 4118 树形DP Holiday's Accommodation
题目链接: HDU 4118 Holiday's Accommodation 分析: 可以知道每条边要走的次数刚好的是这条边两端的点数的最小值的两倍. 代码: #include<iostrea ...