Firefox 100%宽度过度扩展父Div

Question

我有两个文本框,一个div包含一个1 px div.父div具有自动高度,宽度为100%.

在这之后还有另一个100%宽度和高度的div,这个div在Webkit中正确显示,但它过度扩展了父div的边界大约2-3 px.

这里是所有相关的代码,我已经将它缩小到了这些,我在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);  
}

Answer 1

100%宽度不包括填充和/或边框.如果你想包括这些尝试这个CSS:

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