为什么浏览器不像其他元素那样布局绝对定位的输入元素？ [复制]答案

【问题标题】：Why do browsers not layout absolutely-positioned input elements like other elements? [duplicate]为什么浏览器不像其他元素那样布局绝对定位的输入元素？ [复制]
【发布时间】：2021-07-22 05:30:06
【问题描述】：

请查看 sn-p 进行演示。

我试图弄清楚为什么浏览器不根据适用于其他元素的绝对定位规则来布局输入元素。我专门在 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>

【问题讨论】：

更新了副本以包括一个谈论输入和另一个谈论图像（同样的事情发生）
所谓的重复项都没有解决这个问题：规范中的浏览器没有将左/右定位规则应用于输入元素的理由是什么。
你读了吗？我正在使用规范来证明这种行为是正确的

标签： html css google-chrome firefox

【解决方案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>

【讨论】：

我不是在寻找解决方案（基于计算的宽度或其他）。我正在寻找关于规范中的哪个位置的讨论，它说输入元素不是根据适用于其他元素的绝对左/右或上/下约束定位的。