問(wèn)題
我碰到的問(wèn)題如下，body 的 margin 為 0px，height 為 100%，但是它不在頁(yè)面頂端，導(dǎo)致了滾動(dòng)條的出現(xiàn)。
實(shí)際問(wèn)題：margin 垂直外邊距合并
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
垂直外邊距合并問(wèn)題常見(jiàn)于第一個(gè)子元素的 margin-top 會(huì)頂開(kāi)父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下 (FirfFox、Chrome、Opera、Sarfi) 產(chǎn)生問(wèn)題，IE 下反而表現(xiàn)良好。
如果按照 CSS 規(guī)范，IE 的“良好表現(xiàn)”其實(shí)是一個(gè)錯(cuò)誤的表現(xiàn)，因?yàn)?IE 的 hasLayout 渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問(wèn)題”的外觀。好了，如果你讀過(guò)了上面 W3Shcool 的 CSS 外邊距合并的文章后，就很容易討論這個(gè)問(wèn)題了。這個(gè)問(wèn)題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白 (padding-top) 和上邊框 (border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。 再說(shuō)了白點(diǎn)就是：父元素的第一個(gè)子元素的上邊距 margin-top 如果碰不到有效的 border 或者 padding 。就會(huì)不斷一層一層的找自己“領(lǐng)導(dǎo)” (父元素，祖先元素) 的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border 或者 padding 就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的 margin 防止它越級(jí)，假傳圣旨，把自己的 margin 當(dāng)領(lǐng)導(dǎo)的 margin 執(zhí)行。
解決方案
一般來(lái)說(shuō)，為父元素設(shè)置一個(gè) 1px 的 padding-top 就可以了。
