CSS / DOM中的什么是阻止带有display：块的输入框扩展到其容器的大小

Question

HTML / CSS示例：

<div class="container">
    <input type="text" />
    <div class="filler"></div>
</div>

div.container {
    padding: 5px;
    border: 1px solid black;
    background-color: gray;
}

div.filler {
    background-color: red;
    height: 5px;
}

input {
    display: block;
}

题

为什么输入框不扩展为具有与外部相同的宽度，例如div.filler？也就是说，为什么输入框不能像其他块元素那样扩展以适合其容器width: auto;？

我尝试检查Firebug中的“用户代理CSS”以查看是否可以在此处提出一些建议。没运气。我找不到CSS中的任何特定差异，可以将它们具体链接到输入框，而与常规框不同div.filler。

除了好奇之外，我还想知道为什么要深入了解它，以找出一次设置宽度而忘记它的方法。我目前的做法是显式设置两者input及其包含的块元素的宽度，这似乎是多余的，而且不如模块化。虽然我熟悉将输入元素包装在div中然后为输入元素分配负边距的技术，但这似乎是非常不可取的。

规范导致输入框的格式与divs之类的普通块元素不同吗？边框框解决方案很棒，但是它并不能满足人们找出为什么输入框首先是这种方式的原因，以及为什么不能使它们表现得完全像普通div的不使用边框的s
那样的愿望。箱模型这些天。

Answer 1

。

有些元素（<input>, <select>, <button>, <img>, <object>, and <textarea>）被视为
替换元素， 其外观和尺寸由外部资源定义。（例如，操作系统，插件等）

替换的元素可以具有固有的尺寸-
宽度和高度值，该值由元素本身而不是由文档中的周围环境定义。例如，如果图像元素的宽度设置为auto，则将使用链接图像文件的宽度。内部尺寸还定义了一个内部比例，用于确定元素的计算尺寸（如果仅指定一个尺寸）。例如，如果仅为图像元素指定宽度（例如100px），而实际图像的宽度为200像素，高度为100像素，则元素的高度将按相同的比例缩放到50px。

在CSS的控制范围之外，替换的元素还可能具有由元素施加的视觉格式要求；例如，为表单元素呈现的用户界面控件。

W3C的CSS 2.1“ Visual Formatting ModelDetails”部分[讨论]了替换元素和未替换元素的宽度计算。

总体而言，某些表单元素（<textarea>,<button>,and<input>）非常令人讨厌。可以/会改变吗？可能不会很快到来…直到它的核心发生变化，我们必须坚持这些技巧