在火狐浏览器下html和body间产生5px空隙

2015-02-04 11:41 栏目:技术开发 查看(14628)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 就在测试湖南方智地产营销策划有限公司官网在各个浏览器的兼容性的时候,发现在火狐浏览器下出现了一个莫名的问题,那就是html和body间产生5px空隙。如下图所示

2424

灰色的背景是body的,而中间的白色是body下的一个div的区域,奇怪的是用调试工具查看元素发现html和body的高度值并不一样,html比body多出了5px。很多朋友看到这里可能在冷笑,想说难道你边距都不知道么?

显然不是,我这里很显然早就把body和html的margin和padding设置为0了,虽然谈不上多么牛逼的前端水平,但最起码这点专业素养还是有的。于是就奇怪了,从盒模型中看到html和body的margin和padding确实为0,那么既然上面的5px区域body没有覆盖,那怎么会有body的背景色呢(我们进行css操作也很少会对html标签进行操作)。

353

 

再来看看html文档的结构,发现在头部div中并没有存在可能造成这样问题的浮动、定位等等问题,而且在接下来的div中也没有这样的问题出现。

242

但后来我突然发现banner区域刚刚有个margin-top:5px;,而前面说的问题刚好是5px,试着把这个去掉,结果发现不存在问题了。但纳闷的是按照标准的规则,这样并不存在问题,而且在chrome、ie等其他浏览器都不存在这个问题。后面把这个地方的外边距换成内边距问题就解决了,至于原因说实在的暂时还没有得出,希望读到这篇文章的朋友知道原因来分享下,有可能是个非常简单的问题,写出来作为一个记录。

 

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:在火狐浏览器下html和body间产生5px空隙 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 697| 623| 110| 154| 60| 737| 323| 134| 788| 440|