火狐浏览器100%宽度超出父级div

Question

我有两个文本框和一个单独的1像素div，包含在一个div中。父div的高度是自动的，宽度为100%。

之后还有另一个div，它的宽度和高度都是100%，这个div在Webkit中显示正确，但它超出了父div的边界约2-3像素。

以下是所有相关的代码，已经缩小到仅涉及这些内容，并且我已经通过将背景颜色设置为红色来检查Firefox中父div的宽度和高度，当我这样做时，它不会扩展（红色）。

我似乎记得读到过关于如何告诉Firefox或Webkit等如何定义宽度的内容，但我无法记住CSS，并且我花了大约45分钟的时间搜索一切我可以找到的内容，试图再次找到它。 HTML

 <!-- CREDENTIALS -->
            <div class="centreLoginForm-Credentials">

                <div id="disabledDiv"></div>

                <input id="usernameCred" class="textInput top" type="text" placeholder="Username">
                <!--<div class="dividerDiv textBoxGrey"></div>-->
                <input id="passwordCred" class="textInput bottom" type="password" placeholder="Password">

            </div>
            <!-- CREDENTIALS END -->

CSS

.centreLoginForm-Credentials
{
    width: 100%;
    height: auto;

    position: relative;

    margin-top: 10px;

    display: table;

    background-color: rgb(255, 255, 255);

    box-shadow: 0px 0px 3px rgba(200, 200, 200, 0.3);

    border-radius: 3px; 
    border: 1px solid rgba(230, 230, 230, 1);
}

#disabledDiv
{
    position: absolute;

    /*z-index: -10;*/

    width: 100%;
    height: 100%;

    box-shadow: inset 0px 0px 30px rgba(220, 220, 220, 1);  
}

- ツ.jp

---

刚刚快速尝试了一下：我删除了"display: table"，不确定为什么它还在那里，但这解决了问题。然而，我很困惑为什么这样就解决了问题，有人能解释一下吗？ - ツ.jp

Answer 1

百分之百的宽度不包括填充和/或边框。如果您想要包括这些，请使用以下CSS代码：

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

- Willem

Answer 2

就像Willem所说的那样，填充和边框会被添加。

正如你所说，display: table 对于这个div来说是一个奇怪的选择。

但是仅仅设置display: block是不够的，你还应该去掉水平边框：

http://jsfiddle.net/Ks4Ur/

display: block;
border-left: none;
border-right: none;

编辑：还有一个AsciiArt昵称，让我笑了:)

- Andrea Ligios