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

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

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

题

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

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

除了好奇之外,我想知道为什么这是为了找到一种设置宽度并忘记它的方法.我目前明确设置两者input及其包含块元素宽度的做法似乎是多余的,而不是模块化的.虽然我熟悉将输入元素包装在div中然后将输入元素赋给负边距的技术,但这似乎是不可取的.

borkweb和Phrogz都提供了优秀的信息,利用了过去的border-box盒子模型.谢谢你!我想重申我的问题的重点,我打算不同于我对实际问题的拟议解决方案:

规范怎么样导致输入框格式化不像普通的块元素,如divs？边框解决方案很精彩,但它不能满足为什么输入框首先出现这种方式的原因以及为什么它们不能像普通的divs 那样表现出来,它们不使用边框这些天-box模型.

Answer 1

好吧,由于对原始问题的澄清......我做了一些挖掘,发现了这些感叹和这篇文章.

有一些元素(<input>, <select>, <button>, <img>, <object>, and <textarea>)被视为被替换的元素,其外观和维度由外部资源定义.(例如操作系统,插件等)

替换元素可以具有由元素本身定义的内部维度 - 宽度和高度值,而不是文档中的周围环境.例如,如果图像元素的宽度设置为auto,则将使用链接图像文件的宽度.内在维度还定义了一个内在比率,用于确定元素的计算维度,只应指定一个维度.例如,如果仅为图像元素指定宽度,例如100px,并且实际图像宽200像素,高100像素,则元素的高度将缩放相同的量,达到50px.

替换元素也可以具有由CSS控制之外的元素强加的视觉格式要求; 例如,为表单元素呈现的用户界面控件.

W3C的CSS 2.1"可视化格式模型详细信息"部分讨论了替换和未替换元素的宽度计算.

整体而言...对某些表单元素(<textarea>, <button>, and <input>)非常烦人.可以/会改变吗？可能不是很快就会......直到它确实改变核心,我们将不得不坚持黑客:(

Answer 2

您可以通过在输入框上使用box-sizing CSS属性来完成此操作:

input {
    display: block;
    width: 100%;
    box-sizing: border-box; /* CSS3 */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box; /* IE8 */
    -webkit-box-sizing: border-box; /* Safari */
    -khtml-box-sizing: border-box; /* Konqueror */
}

此外,要使其与IE6和IE7一起使用,您需要在HTML中添加它:

<!--[if lt IE 8]><style>input{behavior:url("boxsizing.htc");}</style><![endif]-->

在这里看到它的实际效果.

在这里获取boxsizing.htc .

一段时间后,SpliFF的帖子就是我的来源,自从我使用它几次以来.