为什么这个简单的嵌套DIV在Chrome和FireFox中的渲染方式不同？

Question

这种嵌套div在FireFox和Chrome中的呈现方式不同.Chrome,结果我正在寻找.一个div可以与内容增长的另一个里面div有一个填充20px.

效果应该看起来像20px嵌套的上方和下方div一样(在Chrome中). http://jsfiddle.net/SEOplay/58xRJ/2/embedded/result/

我正在使用的代码:

HTML

<section>
    <div class="dualContainer">
        <div class="dualBgBlock"></div>
        <div class="dualMiddle">
            <div class="dualContent"></div>
        </div>
    </div>
</section>

CSS

div.dualContainer {
    margin-top:50px;
    margin-bottom:20px;
    position:relative;
    z-index:0;
    width:100%;
}
div.dualBgBlock {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    background-color:#ccc;
    width:60%;
    height:100%;
    padding:20px;
}
div.dualMiddle {
    width:80%;
    margin:0 auto;
}
div.dualContent {
    background-color:#333;
    overflow:hidden;
    position:relative;
    height:200px;
}

链接到小提琴:http: //jsfiddle.net/SEOplay/58xRJ/2/

那么我怎样才能让FireFox以Chrome的方式呈现我的代码呢？

Answer 1

填充是在错误的地方.将它.dualBgBlock {}移到.dualContainer {}

小提琴示例

CSS:

div.dualContainer {
    padding:20px;
}

div.dualBgBlock {
    // No padding here
}