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 {}

Fiddle Example

CSS：

div.dualContainer {
    padding:20px;
}

div.dualBgBlock {
    // No padding here
}

Answer 2

将您的填充移至div.dualMiddle，see demo here

div.dualBgBlock {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    background-color:#ccc;
    width:60%;
    height:100%;
    padding:20px; //remove this line

}
div.dualMiddle {
    width:80%;
    margin:0 auto;
    padding:20px;  //add this line
}

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

2 个答案:

Fiddle Example