两个div，父div有padding值，子div有margin-top值，浏览器在解析实际父子位置关系时，他们之间的距离是父padding+子margin-top。现在把父div设置固定高度，并有意让父padding+子margin-top的值大于父div的高度。这时，chrome，firefox,opera中效果都会把子div”挤出“。唯独IE，居然敢擅自增加父div的高度（父div高度是设置好的），用来容纳子div。以下是代码和效果图：

<html>

<head>

	<style>

	.div1{

		background: #feb;

		font-family: Arial,Helvetica,sans-serif;

		font-size: 12px;

		text-align: center;

		padding: 10px;

		border:2px solid #000;

		height: 40px;

	}

	.div2{

		background: #a2d2ff;

		margin-top: 30px;

		border:2px dashed #004993;

		padding: 15px;

	}

	</style>

	<head>

		<body>

			<div class="div1">父div

				<div class="div2">子div</div>

			</div>

		</body>

</html>

效果图：

chrome，firefox，opera

IE

关于IE处理margin和padding值超出父元素高度的问题的更多相关文章

  1. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  2. input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素

    http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...

  3. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  4. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  5. 常用元素默认margin和padding值问题探讨

    关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨 复制代码 代码如下: // body的margin值 firefox 20.0 ----------------------- ...

  6. margin和padding对行内元素的影响

    这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...

  7. 隐藏超出父元素的子元素的部分：overflow

    overflow : 针对超出父级的内容如何显示 值: visible 默认值,超出的内容会显示出来 auto 如果内容超出了父级,那就出现滚动条.如果内容没有超出,就没有滚动条 hidden 超出的 ...

  8. css reset 以及哪些元素有默认margin padding值

    很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fields ...

  9. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

随机推荐

  1. java之抽象类

    1.用abstract关键字来修饰一个类时,这个类叫做抽象类:用abstract来修饰一个方法时,该方法叫做抽象方法. 2.含有抽象方法的类必须被声明抽象类,抽象类必须被继承,抽象方法必须被重写. 3 ...

  2. Android开发艺术探索笔记——View(二)

    Android开发艺术探索笔记--View(二) View的事件分发机制 学习资料: 1.Understanding Android Input Touch Events System Framewo ...

  3. 实战：ajax带参数请求slim API

    restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...

  4. 当您尝试从 64 位 SQL Server 客户端上运行分布式的查询到链接的 32 位 SQL Server 时，您可能会收到一条错误消息

    如何处理64位SQL访问32位SQL执行脚本语句问题 链接服务器"SERVER_YBJK"的 OLE DB 访问接口 "SQLNCLI10" 返回了消息 &qu ...

  5. 进阶学习js中的执行上下文

    在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...

  6. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  7. Exchange Server简介与搭建

    一.Exchange Server简介Exchange Server 是微软公司的一套电子邮件服务组件,是个消息与协作系统. 简单而言,Exchange server可以被用来构架应用于企业.学校的邮 ...

  8. 对于Discuz!NT不允许新用户注册的解决办法

    客户论坛用的是Discuz!NT,但是用户注册总是提示不允许新用户注册,对于这个问题,网上好多说的是管理员登录后台,在"用户与访问控制"里将允许新用户注册改为"是&quo ...

  9. C#ASP.NET 通用扩展函数之 IsWhat 简单好用

    好东西都需要人去整理.分类 注意:需要引用命名空间 SyntacticSugar 用法: /***扩展函数名细***/ //[IsInRange] int num = 100; //以前写法 if ( ...

  10. 使用fat-jar打包多个java工程为可执行文件

    对于一个从C++转向Java的程序员来说,制作java的可执行文件,也算是比较棘手的问题.项目是前几个同事留下来的,几个必备的库文件和制作可执行文件的工具居然都是加密未解封的:不知道是不是因为公司和前 ...