我有一点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;
}
希望能帮助到你.
注意：afaik IE6,7将无法按预期工作,但您可以使用条件注释并以不同方式设置其宽度/高度.
