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

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

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

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

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