关于IE处理margin和padding值超出父元素高度的问题
2014-10-27 10:29 勤劳的插秧哥 阅读(400) 评论(0) 编辑 收藏 举报两个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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步