css - Firefox - 受内部元素边距和填充影响的父边框

Question

我遇到了一个只存在于 Firefox 中的问题(我使用的是 v28)。请看我的fiddle以获得直观的解释。

基本上，#header-wrap 中的内容导致 #header-wrap 的灰色背景与其红色底部边框之间出现 30 像素左右的间隙。我已经将问题缩小到 .jumbotron 的底边距为 30px，但我终究无法弄清楚为什么它会导致 #header-wrap 的背景和边框 仅在 firefox 中。

EDIT: I see that the fiddle version of my page is doing this in chrome as well. But the actual page is only doing it in firefox. Still, any help and explanation of this problem will be greatly appreciated.

我知道我可以通过删除 .jumbotron 上的边距来解决这个问题，但凭良心我不能这样做并且在不理解为什么它只发生在 firefox 中的情况下继续前进:)

Answer 1

出于良心，您应该删除边距。我只是说你应该使用 CSS 重置。 :) 它只发生在 firefox 中，因为它可以在此上下文中使用此行为读取默认 h3

http://www.cssreset.com/

CSS 重置示例

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}