在CSS / DOM中，它是如何阻止显示：块的输入框扩展到其容器大小的
示例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;块元素那样适应其容器width: auto; 做？
我试着检查Firebug中的“用户代理CSS”，看看我能不能拿出一些东西。 没有运气。 我找不到任何具体的CSS差异，我可以特别链接到输入框行为不同于常规的div.filler 。
除了好奇之外，我想知道为什么要深究其中，找出一种设置宽度的方法并忘记它。 我目前的做法是明确设置input及其包含的块元素的宽度似乎是多余的，并且不是模块化的。 虽然我熟悉将输入元素封装在div中然后将输入元素分配给负边界的技术，但这似乎是不可取的。
borkweb和Phrogz都提供了利用过去的border-box盒模型的特殊信息。 感谢你！ 我想重申我的问题的重点，即我打算与提出的解决方案区别于实际问题：
规范的原因是什么导致输入框被格式化，不像像div的普通块元素？ 边框解决方案非常棒，但它不能满足想要弄清楚为什么输入框首先是这种方式，以及为什么它们不能像普通div一样表现出来，它们并不使用边框模型这些天。
好吧，由于原来的问题的澄清...我做了一些挖掘，发现这些感叹和这篇文章。
有几个元素（ <input>, <select>, <button>, <img>, <object>, and <textarea> ）被视为替换元素，其外观和尺寸由外部资源定义。 （如操作系统，插件等）
替换元素可以具有固有尺寸 - 由元素本身定义的宽度和高度值，而不是文档中的环境。 例如，如果图像元素的宽度设置为auto，则将使用链接图像文件的宽度。 固有尺寸还定义了用于确定元素的计算尺寸的固有比率，只应指定一个尺寸。 例如，如果仅为图像元素指定宽度（例如100px），并且实际图像宽度为200像素，高度为100像素，则元素的高度将按照相同的比例缩放至50像素。
替换的元素也可以具有由元素施加的视觉格式要求，而不受CSS的控制; 例如，为表单元素渲染的用户界面控件。
W3C的CSS 2.1“视觉格式模型细节”部分讨论了替换元素和非替换元素的宽度的计算。
总体而言......对于某些表单元素（ <textarea>, <button>, and <input> ）来说非常烦人。 它/它会改变吗？ 可能不会很快......直到它在核心上发生变化，我们将不得不坚持使用hacks :(
您可以通过在输入框中使用框大小的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的帖子是我一段时间后的消息，之后我又用了几次。
据我所知，输入文本字段的默认长度是20个字符。
我想这是它将它设置为自动时获得的价值。 通常情况下，屏幕宽度大小的文本字段是没有用的，这就是为什么我猜测它默认为20个字符的自动 。
无论如何，最好检查一下w3c标准，或者得到某个浏览器开发者的回应。
链接地址: http://www.djcxy.com/p/75517.html