微构网络

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

2015-02-04 11:41 栏目:技术教程 查看(9,014)

就在测试湖南方智地产营销策划有限公司官网在各个浏览器的兼容性的时候,发现在火狐浏览器下出现了一个莫名的问题,那就是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等其他浏览器都不存在这个问题。后面把这个地方的外边距换成内边距问题就解决了,至于原因说实在的暂时还没有得出,希望读到这篇文章的朋友知道原因来分享下,有可能是个非常简单的问题,写出来作为一个记录。

 

转载请注明出处:在火狐浏览器下html和body间产生5px空隙 - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)