解决CSS margin-top在火狐下失效问题

最新推荐文章于 2022-10-11 22:30:00 发布
最新推荐文章于 2022-10-11 22:30:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010682330/article/details/77834948
版权

这里向大家描述一下CSS margin-top在火狐下失效的解决方法，margin-top属性在火狐及IE下面的表现有的时候是不一样的，在火狐下面可以实现自己定义的效果但是到了IE下面却成了双倍的像素。

AD：

 

margin-top属性在火狐及IE下面的表现有的时候是不一样的，这里和大家分享一下CSSmargin-top在火狐下失效的方法，在火狐下margin-top很多时候都会失效，解决这个问题的办法就是在CSS里面加入：float:left;display:inline;请看下文详细介绍。

解决CSS margin-top在火狐下失效的方法

margin-top属性在火狐及IE下面的表现有的时候是不一样的，在火狐下面可以实现自己定义的效果但是到了IE下面却成了双倍的像素，在火狐下margin-top很多时候都会失效，解决这个问题的办法就是在CSS里面加入：float:left;display:inline;

例子：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=gb2312"/> 
  7. <title>无标题文档</title> 
  8. <styletypestyletype="text/CSS"> 
  9. <!--  
  10. .w{  
  11. background-color:#000099;  
  12. padding:0px;  
  13. height:100px;  
  14. width:200px;  
  15. margin-top:20px;  
  16. margin-left:30px;  
  17. }  
  18. --> 
  19. </style> 
  20. </head> 
  21. <body> 
  22. <divstyledivstyle="background-color:#006666;
  23. width:400px;height:200px;clear:both;"> 
  24. <divclassdivclass="w"></div> 
  25. </div> 
  26. </body> 
  27. </html> 
  28.  

解决后：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.  
  6. <metahttp-equivmetahttp-equiv="Content-Type"
  7. content="text/html;charset=gb2312"/> 
  8. <title>无标题文档</title> 
  9. <styletypestyletype="text/CSS"> 
  10. <!--  
  11. .w{  
  12. background-color:#000099;  
  13. padding:0px;  
  14. height:100px;  
  15. width:200px;  
  16. margin-top:20px;  
  17. margin-left:30px;  
  18. float:left;display:inline;  
  19. }  
  20. --> 
  21. </style> 
  22. </head> 
  23. <body> 
  24. <divstyledivstyle="background-color:#006666;
  25. width:400px;height:200px;clear:both;"> 
  26. <divclassdivclass="w"></div> 
  27. </div> 
  28. </body> 
  29. </html> 
剑雪封喉r
关注
专栏目录
CSS 滚动捕获 scroll-margin
broken_promise的博客
12-02 1274
TOC/TOC。
html 锚点兼容火狐,iframe锚点定位在firefox火狐浏览器下失效解决方案
weixin_42442958的博客
06-09 747
iframe锚点定位在firefox火狐浏览器下失效解决方案属于前端实例代码，有关更多实例代码大家可以查看。关于锚点定位大家一定都不会陌生，使用锚点可以实现定位效果。如果确实不了解描点定位的话，可以参阅html利用锚点实现定位代码实例一章节。出现问题的场景如下:A.html是父页面，它里面使用标签引用B.html页面。B.html页面里面有几个定位锚点，点击可以定位到响应的位置，此页面是有垂直滚动...
css布局绝对定位下margin失效的解决方法
09-25
绝对定位层下margin:auto会失效，这时设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果
firefox margin-top失效的原因与解决办法
lqc851011的专栏
01-22 477
为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。 现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地，切莫
Firefox下margin-top失效的问题
lqc851011的专栏
08-21 991
<br />（一）margin-top失效<br />先看下面代码：<br /><br /><div><br /><div class="box1" >float:left</div><br /><div class="box2">clear:both; margin-top:20px;</div><br /></div><br /><br />两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。<br /><br />网上能找到的两种比较
CSS Margin失效问题
softmanfly的专栏
08-24 1436
前端 CSS
转-firefox浏览器下margin-top不起作用的原因和对策
weixin_30825581的博客
06-18 71
“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、 padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。 在css2.1中，水平的margin不会被折叠。 垂直margin可能在一些盒模型中被折叠： 1、在常规文档流中，2个或以上的块级盒模型相邻的垂直...
DIV多层嵌套margin-top的BUG问题
09-25
通过使用浮动、内边距或者调整元素的布局方式，可以有效地解决多层嵌套`margin-top`带来的问题，确保在多种浏览器下得到一致的显示效果。同时，这也提醒我们在进行前端开发时，应始终考虑浏览器兼容性，以提供更好的...
Firefox下margin-top会出错
12-02
### Firefox 下 `margin-top` 失效问题及解决方案 #### 一、问题概述 在进行网页设计时，尤其是在使用Mozilla Firefox浏览器环境下，开发者可能会遇到一个常见的布局问题：当尝试通过CSS中的`margin-top`属性来调整...
margin-top在火狐和IE的区别
10-11
定位层被遮的问题，特别是在火狐和IE的区别
网页设计：Css大坑之一，设置margin无效
热门推荐
qq_44131760的博客
03-07 1万+
出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。 垂直外边距特性： 1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。 2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。 下面会进行实验，看看margin具体是
Firefox下margin-top失效解决技巧
xumingrencai
10-11 148
经常会遇到Firefox下margin-top这失效的问题，这里和大家分享一下Firefox下margin-top失效的原因与解决方法。 Firefox下margin-top失效的原因与解决方法 经常会遇到Firefox下margin-top这失效的问题,但一直都是用变通的方式去解决,今天在网上查了查,有所收获,转帖备忘。在这个说明中，“collapsingmargins”（折叠margin）...
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 3747
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
如何解决CSS3中盒子margin无效的问题?
最新发布
i-cat的博客
10-11 1176
CSS3盒子模型中的常见问题 : 盒子模型内减、margin合并现象、嵌套块级元素塌陷、行内元素设置内外边距无效
margin-top在firefox失效的原因及解决办法
Kyle的专栏
10-31 901
为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地
关于margin-top兼容问题
weixin_53278262的博客
12-21 558
关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {
【css】使用margin时易出现的错误
汪小穆的博客
05-26 1884
前言：margin在布局的时候还是蛮常用到，不过margin还是容易产生一些问题的。   一、margin-top传递给了父级。 &lt;body&gt; &lt;style&gt; body { margin:0; background:pink; } .box1 { width:200px; height:200px; background:#333;} .box2 { width:1...
margin-top margin-left兼容
fyqcdbdx的专栏
12-30 1013
常出现两种情况   （一）margin-top失效      先看下面代码： float:left clear:both; margin-top:20px;    两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。 www.webjx.com<style type="text/css">floa
CSS浏览器兼容全解析：IE6/7/Firefox问题与解决技巧
本文档全面梳理了CSS在IE6.0、IE7.0以及Firefox浏览器之间的兼容性问题，对于Web开发者来说是一份极其实用的参考资料。以下是一些关键知识点： 1. **垂直居中问题**: - CSS的`vertical-align:middle`属性用于让`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值