输入的 CSS 宽度和高度设置为 100% 大于其容器

Question

我遇到了一些 CSS 问题。我有一个具有固定大小和绝对位置的容器 div。在里面我有某种元素和一个 div。在我的示例中，元素可以是按钮或输入。按钮符合规则，100% 占据容器，输入不符合规则，超过 100% 占据容器。这是怎么回事，我该如何解决？ jsfiddle - 单击任一小部件以查看其边界。

CSS

.Object
{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}

.Object .Cover, .Object button, .Object input
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:0;
}

.Object button
{
    padding: 2px;
}

.Object .Cover
{
    cursor: move;
    z-index:1;
}

HTML

<div class="Object" id="3b089a23-7732-e743-aea4-d9dcef359d4e" name="Unnamed Widget" style="height: 30px; "><div class="Cover"></div><input /></div>

<div class="Object" id="e1bc0640-e049-eda8-05ac-0a99c21c6fe1" name="Unnamed Widget" style="height: 30px; top: 10px; left: 210px; "><div class="Cover"></div><button data-click="">Unnamed Button</button></div>

Answer 1

104 像素是由盒子模型引起的。当设置为默认值时，它将考虑元素的边框和填充，因为输入具有默认填充和边框(在本例中为 ipx)，它加起来为 4 并使其从其父级“增长”。

如果您将 box-sizing: border-box; 添加到您的输入选择器(我将其移至独立选择器)并设置您自己的边框样式，它会如您所愿:)

.Object input
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /*border: 0;
    padding: 0;*/
    border: 1px solid #ccc;
    background-color: #eee;
}

http://jsfiddle.net/K5D9z/13/

希望对您有所帮助。

注意:afaik IE6、7 不会按预期工作，但您可以只使用条件注释并以不同方式设置其宽度/高度。