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

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;
}

http://jsfiddle.net/bPEkb/3/ http://jsfiddle.net/bPEkb/3/

Question

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

我尝试检查 Firebug 中的“用户代理 CSS”，看看我是否可以在那里想出一些东西。没有运气。我找不到 CSS 中的任何具体差异，我可以专门链接到与常规行为不同的输入框div.filler.

除了好奇之外，我还想知道为什么要追根究底，找出一种设置宽度一次就忘记的方法。我目前明确设置两者宽度的做法input它包含的块元素似乎是多余的并且不够模块化。虽然我熟悉将输入元素包装在 div 中然后分配给输入元素负边距的技术，但这似乎是非常不可取的。

borkweb 和 Phrogz 都提供了利用border-box旧时代的盒子模型。谢谢你！我想重申我的问题的重点，我打算将其与针对我的实际问题提出的解决方案 https://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not:

规范会导致输入框的格式与普通块元素不同，例如div是？ border-box 解决方案很棒，但它不能满足人们想要弄清楚为什么输入框首先是这样的以及为什么不能使它们的行为与普通框完全相同的愿望divs，现在不使用 border-box 模型。

好吧，由于原始问题的澄清......我做了一些挖掘并发现这些哀叹 http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ and 本文 http://reference.sitepoint.com/css/replacedelements.

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

被替换的元素可以具有内在的 尺寸 - 宽度和高度值 由元素定义 本身，而不是通过它 文档中的环境。为了 例如，如果图像元素有 width设置为auto，宽度 将使用链接的图像文件。 内在尺寸也定义了 用于的内在比率 确定计算尺寸 元素应该只有一维 被指定。例如，如果仅 为图像指定宽度 元素（例如，100px）和实际的 图像宽 200 像素，宽 100 像素高，元素的高度 将缩放相同的量，以 50 像素。

替换的元素也可以具有视觉效果 规定的格式要求 元素，不受 CSS 控制； 例如，用户界面控件 为表单元素呈现。

W3C 的 CSS 2.1“视觉格式化模型详细信息”部分讨论 http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins计算替换元素和非替换元素的宽度。

总的来说...对于某些表单元素来说非常烦人（<textarea>, <button>, and <input>）。它可以/会改变吗？可能不会很快......直到它的核心发生改变，我们将不得不坚持使用黑客:(