就在測(cè)試湖南方智地產(chǎn)營(yíng)銷策劃有限公司官網(wǎng)在各個(gè)瀏覽器的兼容性的時(shí)候，發(fā)現(xiàn)在火狐瀏覽器下出現(xiàn)了一個(gè)莫名的問(wèn)題，那就是html和body間產(chǎn)生5px空隙。如下圖所示

灰色的背景是body的，而中間的白色是body下的一個(gè)div的區(qū)域，奇怪的是用調(diào)試工具查看元素發(fā)現(xiàn)html和body的高度值并不一樣，html比body多出了5px。很多朋友看到這里可能在冷笑，想說(shuō)難道你邊距都不知道么？

顯然不是，我這里很顯然早就把body和html的margin和padding設(shè)置為0了，雖然談不上多么牛逼的前端水平，但最起碼這點(diǎn)專業(yè)素養(yǎng)還是有的。于是就奇怪了，從盒模型中看到html和body的margin和padding確實(shí)為0，那么既然上面的5px區(qū)域body沒(méi)有覆蓋，那怎么會(huì)有body的背景色呢（我們進(jìn)行css操作也很少會(huì)對(duì)html標(biāo)簽進(jìn)行操作）。

再來(lái)看看html文檔的結(jié)構(gòu)，發(fā)現(xiàn)在頭部div中并沒(méi)有存在可能造成這樣問(wèn)題的浮動(dòng)、定位等等問(wèn)題，而且在接下來(lái)的div中也沒(méi)有這樣的問(wèn)題出現(xiàn)。

但后來(lái)我突然發(fā)現(xiàn)banner區(qū)域剛剛有個(gè)margin-top:5px;,而前面說(shuō)的問(wèn)題剛好是5px，試著把這個(gè)去掉，結(jié)果發(fā)現(xiàn)不存在問(wèn)題了。但納悶的是按照標(biāo)準(zhǔn)的規(guī)則，這樣并不存在問(wèn)題，而且在chrome、ie等其他瀏覽器都不存在這個(gè)問(wèn)題。后面把這個(gè)地方的外邊距換成內(nèi)邊距問(wèn)題就解決了，至于原因說(shuō)實(shí)在的暫時(shí)還沒(méi)有得出，希望讀到這篇文章的朋友知道原因來(lái)分享下，有可能是個(gè)非常簡(jiǎn)單的問(wèn)題，寫出來(lái)作為一個(gè)記錄。