Firefox下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

老项目的漂浮父元素,里的个别元素缺少float属性,加入后解决.要就都有,要就都没有,但是在某种情况下IE 是认得

时间: 2024-12-29 00:36:03

Firefox下margin-top问题的相关文章

Firefox下网页缩放时防止div被挤到下一层

http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/ Firefox下网页缩放时防止div被挤到下一层 问题:三个div,一个div中包含两个浮动带有border边框的div:且样式设计中保证两个div全部宽度之和等于外层div的宽度.在火狐下缩放网页显示比例小于100%时,会导致右边div被挤到下一行. 案例: <style> *{ margin:0; padding:0;} #box{width:300

FontAwesome在Firefox下建立静态页面不显示的情况

1.在相对路径时发现firefox的问题(但是在Chrome下没有问题),还需进一步确认. 最开始是直接把FontAwesome的less直接替换掉Bootstrap的glyphicons字体,编译后在firefox下一直是不显示,经过单独引用FontAwesome的css及font才发现如果换成第14行的路径写法是可以正常显示的,如图: 2.情景描述 以往做静态页面原型的文件的文件结构是这样的: folder |----css |----images |----js index.html ..

xmlHttpRequest在Firefox下不起作用?

描述: xmlHttpRequest 在IE下正常,在Firefox下不起作用. 原因: xmlHttpRequest 对象的 onreadychange 不会在Firefox下执行, 解放方法: 使用 jQuery 实现 AJAX 去代替 xmlHttpRequest.

解决Firefox下input button内文字垂直居中

众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致): 按钮文字居中是不行的(此时设置padding-bottom是没用的) : 等等… 1 input[type="reset"]::-moz-focus-inner, 2 input[type="button"]::-moz-focus

firefox下jquery ajax 返回 [object XMLDocument]处理

1 在firefox下使用jquery ajax处理 返回json类型的时候,ajax执行成功返回结果为 [object XMLDocument]. 2 3 处理办法:在getWriter.write():前面加上一行代码response().setContentType("text/html;charset=UTF-8");

解决IE和firefox 下flash盖住div的问题(转载)

原文地址:http://www.oschina.net/question/171410_26563 做的企业站 顶部是flash的滚动图片. 右侧是在线客户,但是flash盖住了在线客户的div 网上搜索解决方法如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/

Linux下使用top/vmstat查看系统资源

vmstat 命令是常见的Linux性能监控工具,报告关于内核线程.虚拟内存.磁盘.陷阱和 CPU 活动的统计信息.由 vmstat 命令生成的报告可以用于平衡系统负载活动.系统范围内的这些统计信息(所有的处理器中)都计算出以百分比表示的平均值,或者计算其总和. vmstat使用 一般vmstat工具的使用是通过两个数字参数来完成的,第一个参数是采样的时间间隔数,单位是秒,第二个参数是采样的次数. top使用 区别top命令 top命令用于显示系统当前的进程和其他状况:top是一个动态显示过程,

Firefox下td用display控制页面导致页面变形

Firefox下table的td元素如果使用了display:'block'会使得table变形,原因是block会将对象强制作为块对象呈递,为对象之后添加新行,所以并不适合td,改成display:'' 就可以了, 由于display属性设置为空时,默认为显示,而不死块对象传递,所以就会按照table默认的方式呈现. Firefox下td用display控制页面导致页面变形,布布扣,bubuko.com

Linux下取代top的进程管理工具 htop

一.htop 简介 This is htop, an interactive process viewer for Linux. It is a text-mode application (for console or X terminals) and requires ncurses. Comparison between htop and top In 'htop' you can scroll the list vertically and horizontally to see all

Firefox下table单元格td设计relative定位失效解决方案(转)

问题描述: 默认情况下,table的单元格td的display为table-cell,在IE 给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以. 但是在IE下,position:absolute的容器的z-index总是比td的z-index低,td层总是在 position:absolute的容器的上面 发生条件: 1. IE6.IE7.IE8和FF浏览器 2. 使用td默认样式,设置td的posit