css2.1中 firefox 与IE 对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没有效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .box1{ float:left; width:500px; height:100px; background:#999; } .box2{ margin-top:20px; width:500px; height:50px; background:#000; color:#fff; clear:both; } --> </style> </head> <body> <div> <div class="box1" >float:left</div> <div class="box2">clear:both; margin-top:20px;</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
网上能找到的两种比较靠谱的解释：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下仅作用于父容器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com.com</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .box2{ margin-top:20px; width:500px; height:50px; background:#000; color:#fff; } --> </style> </head> <body> <div class="box" style="height:100px;background:red;"> <div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
转载于:https://www.cnblogs.com/bluers/archive/2012/09/02/2667465.html
css2.1中 firefox 与IE 对margin-top的不同解释相关推荐
- vue3中body有默认属性margin:8px如何去掉?
vue3中body有默认属性margin:8px如何去掉? 直接找到vue项目根目录下自动生成的index.html文件,在下面添加下面的代码,就可以解决. 需要添加的代码 <style> ...
- Ubuntu中Firefox不能访问简书
在Ubuntu中,Firefox不能访问简书,显示403页面. 然而同一台机器,Chromium能正常显示:同样的网络配置,Windows中Firefox也正常. 看到这个页面:Ubuntu中火狐浏览 ...
- 解决在Ubuntu18.04中firefox打开网页出现建立安全失败并提示PR_END_OF_FILE_ERROR
解决在Ubuntu18.04中firefox打开网页出现建立安全失败并提示PR_END_OF_FILE_ERROR 解决办法 打开设置 找到网络 打开网络代理栏中的最右边的按钮 选择自动
- 在才开始进入前端这个坑的时候 在布局中会遇到很多问题 我才入这个坑的时候 在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素 没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素 解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
- JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释，全局对象，隐含的全局概念...
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html><body><script type="tex ...
- SRA 练习：解释 CRUD 矩阵方法，并从上面 “用于化学品跟踪管理系统的 CRUDL 矩阵示例”图中找出被遗漏的需求，并解释是如何找的？
文章目录 一.练习题目 二.CRUD 矩阵介绍 三.矩阵分析 四.寻找遗漏需求 一.练习题目 解释 CRUD 矩阵方法,并从上面 "用于化学品跟踪管理系统的 CRUDL 矩阵示例" ...
- java代码执行了两次_Java中JComboBox的itemStateChanged事件执行两次的解释
今天做项目,用到了JComboBox,即下拉列表框.为了在被选中的项发生改变时获得被选中的项,所以使用的ItemStateChanged事件,可是问题就来了,每次触发该事件,它都执行两次,屡试不爽.一 ...
- Linux中ps命令ps -aux 和ps -ef 参数解释
Linux中ps命令ps -aux 和ps -ef 参数解释 一.ps命令 1.1 ps -aux 1.2 ps -ef 一.ps命令 ps命令用于显示当前进程的状态,类似于 windows 的任务管 ...
- 绝对引用计算机,计算机中绝对引用-excel中的绝对引用有什么用？请解释得通俗一点...
Excel中的相对引用和绝对引用是怎么操作的? 对列标(ABCD等)和(123等)绝对引用时要加上"$",引用时不用加任何符号. 相对引用和绝对引用是指将公式向右或复制时列标和行号 ...
最新文章
- java怎么将字符串反序输出_对String字符串进行反序输出
- SpringMVC拦截器-用户登录权限控制代码实现2
- break后面的语句还执行吗_【自学C#】|| 笔记 5 条件语句if、switch
- mapreduce简单的gzip压缩
- Linux(fedora 10)Hello World模块
- java zero copy 实现,关于Zero Copy
- undefined reference to `std::ios_base::Init::Init() 解决
- 快速行进算法（fast_marching_kroon）的matlab代码
- 计算机自动控制论文,电气自动化控制人工智能技术研究-人工智能论文-计算机论文.docx...
- js中变量名提升和函数名提升
- Win10怎么让英伟达独立显卡成为主显卡
- pycharm导入opencv库失败解决方法
- 大家口中所说的A站、B站、C站、D站、E站、F站、G站、H站、I站、J站、K站、L站、M站、N站、O站、P站、Q站、R站、S站、T站、U站、V站、W站、X站、Y站、Z站都是什么网站？
- matlab相关系数的显著性检验
- Kali Linux 暴力破解wifi密码详细步骤
- 相机靶面尺寸详解+工业相机选型
- 厦门大学353卫生综合考研参考书目
- centos7 查看multipath服务状态是start condition failed,/etc/multipath.conf was not met
- AD软件自动安装部署
- requests实战之网页采集器