为什么浏览器不像其他元素那样布局绝对定位的输入元素

Question

请参阅演示片段。

我试图弄清楚为什么浏览器不按照适用于其他元素的绝对定位规则来布局输入元素。我特别在CSS/HTML规范中寻找这种行为的正当性。

.colorPicker {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid red;
position: relative;
overflow: hidden;
}
.colorPicker * {
display: block;
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
}

<p>div is positioned correctly</p>
<div class="colorPicker">
<div style="background: blue"></div>
</div>
<p>'color' input is not sized at all</p>
<div class="colorPicker">
<input type="color" />
</div>
<p>'text' input is too wide</p>
<div class="colorPicker">
<input type="text" />
</div>
<p>'button' input is not wide enough</p>
<div class="colorPicker">
<input type="button" />
</div>

Answer 1

您可以将width/height/box-sizing应用于不使用定位属性自动调整大小的元素。

.colorPicker * {
/* continued */
width: calc(100% - 10px);
height: calc(100% - 10px);

box-sizing: border-box;
}

.colorPicker {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid red;
position: relative;
overflow: hidden;
}
.colorPicker * {
display: block;
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);

box-sizing: border-box;
}

<p>div is positioned correctly</p>
<div class="colorPicker">
<div style="background: blue"></div>
</div>
<p>'color' input is not sized at all</p>
<div class="colorPicker">
<input type="color" />
</div>
<p>'text' input is too wide</p>
<div class="colorPicker">
<input type="text" />
</div>
<p>'button' input is not wide enough</p>
<div class="colorPicker">
<input type="button" />
</div>