Question

我有一个通过CSS定义的布局，它有三列。它通过Chrome正确显示，但在Firefox中，第三（右）列环绕到底部。我是否错误地定义了布局？

<style type="text/css">
    .content {
        position: relative;
        border-top-width: 1px;
        width: 100%;
        min-width: 960px;
        margin-top: -1px;
    }

    .content-container {
        border: 0;
        position: relative;
        width: 960px;
        border-radius: 0 0 0 0;
        margin: auto;
    }

    .left-menu-container {
        width: 188px;
        padding: 0 20px 0 0;
        border: 0;
        box-sizing: border-box;
        vertical-align: top;
        position: relative;
        display: inline-block;
    }

    .center-content-container {
        vertical-align: top;
        display: inline-block;
        min-height: 900px;
        width: 500px;
        border-left: 1px solid #EBEBEB;
        border-right: 1px solid #EBEBEB;
        height: 100%;
        position: relative;
        padding: 15px 0 0 0;
    }

    .center-content-subcontainer {
        padding: 0 0 0 5px;

    }

    .right-menu-container {
        vertical-align: top;
        display: inline-block;
        width: 260px;
        border: solid;
        position: relative;
    }

    .right-menu-subcontainer {
        margin: 16px 0 0 0;
    }   

    #slideshow {
        position:relative;
        height:250px;
        width: 250px;
        overflow: hidden;
        background-color: #ffffff;
    }

</style>

如何在浏览器中正确显示？

<body>
<div class="content">
    <div class="content-container">
        <div class="left-menu-container"></div>

        <div class="center-content-container">
            <div class="center-content-subcontainer"></div>
        </div>

        <div class="right-menu-container">
            <div class="right-menu-subcontainer">
                <div id="slideshow" align="center">
                    <img src="" alt="Slideshow" title="Slideshow" width="250" height="100">
                </div>
            </div>
        </div>
    </div>
</div>


</body>

Answer 1

在FF 5.x中，框宽度为：

Left: 188 + 20 (width+ padding)
Center: 500 + 1 + 1 (width + L & R borders)
Right: 260 + 3 + 3 (width + L & R borders)

Total: 976

Firebug的布局检查员是你的朋友。

Answer 2

我认为问题在于这一行CSS：

box-sizing: border-box;

您使用的是哪个版本的Firefox？因为即使是第4版（可能以后，我也不确定），Firefox只支持-moz-box-sizing。如果Firefox没有改变它的盒子大小，那么这意味着它认为你试图将968px的内容保留在960px的空间中。

Answer 3

在左侧容器上试试这个：

.left-menu-container {

    width: 188px;
    padding: 0 20px 0 0;
    border: 0;

    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;

    vertical-align: top;
    position: relative;
    display: inline-block;
}

可能值得一读： https://developer.mozilla.org/en/CSS/box-sizing

包含列div的Chrome和Firefox之间的差异

3 个答案: