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

我有一点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>

解决方法

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将无法按预期工作,但您可以使用条件注释并以不同方式设置其宽度/高度.

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

解决方法

相关文章