3

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

毕竟还有另一个 div 是 100% 的宽度和高度，这个 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);  
}
4

2 回答 2

7

The 100% width does not include padding and/or borders. If you want to include these try this css:

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
于 2013-01-08T14:53:19.870 回答
2

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

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

但display: block仅设置是不够的，您还应该删除水平边框：

http://jsfiddle.net/Ks4Ur/

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

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

于 2013-01-08T15:01:15.403 回答