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

Answer 2

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

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

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

http://jsfiddle.net/Ks4Ur/

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

编辑：为AsciiArt昵称+1，让我发笑：）

Firefox 100％宽度过度扩展父Div

2 个答案: