Firefox 100% 宽度过度扩展父 Div答案

【问题标题】：Firefox 100% Width Overextending Parent DivFirefox 100% 宽度过度扩展父 Div
【发布时间】：2012-12-22 10:56:20
【问题描述】：

我有两个文本框，一个 1 像素的 div 包含在一个 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);  
}

【问题讨论】：

很快就尝试了一些东西：我删除了 *display: table，* 不知道为什么它仍然存在，它解决了问题.我很困惑为什么它修复了它，任何人都可以解释一下吗？

标签： html css firefox width

【解决方案1】：

100% 宽度不包括填充和/或边框。如果你想包含这些，试试这个 css：

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

【讨论】：

【解决方案2】：

是的，正如 Willem 所说，添加了填充和边框。

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

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

http://jsfiddle.net/Ks4Ur/

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

编辑：为让我发笑的 AsciiArt 昵称 +1 :)

【讨论】：