margin-top失效及解决办法
现象:
当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。
就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。
<div id="parrent"> <div id="box1"></div></div> #parrent{ width:500px; height:300px; background:teal;} #box1{ width:100px; height:100px; background:aqua; margin:20px;}
解决方法:
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px aqua solid;(>0)
3、设置父元素的padding:1px;(>0)
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空,填充一定的内容。
1、如果啥都不设置会是第一种效果
div style="background:black;border:1px solid red;">
<div style="width:400px;height:300px;background:red;">
<div style="width:300px;height:200px;background:green;margin:20px;">
</div>
</div>
</div>
2、设置个border,就可以达到想要的效果了
<div style="background:black;border:1px solid red;">
<div style="width:400px;height:300px;background:red;border-top:1px solid red;">
<div style="width:400px;height:300px;background:green;margin:20px;">
</div>
</div>
</div>
这个现象并不是bug,而是有理论依据的:
《on having layout》
hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
但值得一提的是,只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况,在IE6 IE7中均显示正常,但这恰恰说明了他们是不符合规范的,而FF合Chrome则是严格遵守规范的。
margin-top失效及解决办法的更多相关文章
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
- zsh下 home end 键失效的解决办法
我的环境是 centos 6.5 x64 安装 oh my zsh 后,home end 键失效,解决办法为在 .zshrc 里添加设置如下 #Rebind HOME and END to do th ...
- 前端问题——png图片在IE6下透明失效,解决办法
今天,一位同事问我问题,png 图片在IE6下透明背景失效. 解决办法,在网上查了很多,最后还是采用两种方案来解决这个问题 1.把这个网页的png格式图片变更为gif格式的图片.问题解决 2.就是让这 ...
- ios端position为fixed失效的解决办法
关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...
- WindowsFormsHost下MouseWheel失效的解决办法
原文:WindowsFormsHost下MouseWheel失效的解决办法 看了网上有些写的用钩子,但是,在Stack Overflow上找到一个简便的方式
- xcode4 语法高亮和自动补全失效的解决办法
xcode4 语法高亮和自动补全失效的解决办法xcode4有一个bug,某些时候会造成类名的着色显示不出来,还有就是代码补全不能完全显示,而且没有参数. 解决方法: 首先关闭项目窗口,然后到Organ ...
- Oracle SQL Developer 编辑区不能删除,后退,空格,复制粘贴等功能都失效的解决办法
Oracle SQL Developer 编辑区不能删除,后退,空格,复制粘贴等功能都失效的解决办法 解决: 打开菜单并选择Tools-prefrence-Accelerators-Load Pres ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
随机推荐
- [Leetcode] Search In Rotated Sorted Array (C++)
题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...
- SeekBar和RatingBar
今天在看一个音乐播放器的源代码时候用到了SeekBar,就翻出来mars老师的视频复习了一下,然后综合使用了一下. 首先先看下运行效果: 下来我们看看布局文件的设计: main.xml: < ...
- CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...
- pm2安装及常用命令
安装:npm install -g pm2 启动程序:pm2 start <app_name|id|all> 列举进程:pm2 list 退出程序:pm2 stop <app_nam ...
- [TYVJ] P1004 滑雪
滑雪 背景 Background 成成第一次模拟赛 第三道 描述 Description trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场是一个矩形,为了简便,我们用r行c列的矩阵来表示 ...
- jdbc 处理mysql procedure返回的多个结果集
1:测试数据库表user mysql> desc user$$ +-------+-------------+------+-----+---------+----------------+ | ...
- USB系列之一:列出你的USB设备
USB现在已经成为PC机必不可少的接口之一,几乎所有的设备都可以接在USB设备上,USB键盘.鼠标.打印机.摄像头,还有常用的U盘等等,从本篇文章开始,将集中篇幅介绍一下在DOS中使用USB设备的方法 ...
- 基于Keil C的覆盖分析,总结出编程中可能出现的几种不可预知的BUG
基于Keil C的覆盖分析,总结出编程中可能出现的几种不可预知的BUG,供各位网友参考 1.编译时出现递归警告,我看到很多网友都采用再入属性解决,对于再入函数,Keil C不对它进行覆盖分析,采用模拟 ...
- HDOJ-1009 FatMouse' Trade
http://acm.hdu.edu.cn/showproblem.php?pid=1009 # include <stdio.h> # include <algorithm> ...
- Implement Hash Map Using Primitive Types
A small coding test that I encountered today. Question Using only primitive types, implement a fixed ...