输入与显示：块不是一个块，为什么不呢？
为什么display:block;width:auto; 在我的文本输入不像一个div和填充容器的宽度？
我的印象是div只是一个具有自动宽度的块元素。 在下面的代码不应该div和输入具有相同的尺寸？
我如何获得输入以填充宽度？ 由于输入具有填充和边框（导致最终宽度为1像素+5像素+ 100％+ 5像素+ 1像素），所以100％宽度将不起作用。 固定宽度不是一种选择，我正在寻找更灵活的东西。
我更愿意直接回答解决方法。 这看起来像是一个CSS怪癖，并且理解它稍后可能会有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
我应该指出，我已经可以用包装解决方法来做到这一点。 除了这个与页面语义和CSS选择器关系紧密相连之外，我试图理解问题的本质以及它是否可以通过改变INPUT本身的性质来克服。
好的，这真的很奇怪！ 我发现解决方案是简单地将max-width:100%添加max-width:100%的输入width:100%;padding:5px; 。 然而，这引发了更多的问题（我将在单独的问题中提出），但宽度似乎使用普通CSS盒模型，而最大宽度使用Internet Explorer边框模型。 非常奇怪。
好的，最后一个似乎是Firefox 3中的一个bug。Internet Explorer 8和Safari 4将最大宽度限制为100％+ padding + border，这是规范要求的。 最后，Internet Explorer得到了正确的结果。
哦，我的天啊，这太棒了！ 在玩这个游戏的过程中，在古老的大师Dean Edwards和Erik Arvidsson的帮助下，我设法拼凑出三个独立的解决方案，在具有任意填充和边框的元素上制作真正的跨浏览器100％宽度。 见下面的答案。 此解决方案不需要任何额外的HTML标记，只需要一个类（或选择器）以及用于传统Internet Explorer的可选行为。
看看我想出了一个解决方案，它使用CSS 3 box-sizing:border-box相对未知的box-sizing:border-box样式。无论元素的填充和/或边框如何，这都允许任何元素具有“真实”100％的宽度。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Cross-browser CSS box-sizing:border-box</title>
<style type="text/css">
form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}
/* The voodoo starts here */
.bb {
box-sizing: border-box; /* CSS 3 rec */
-moz-box-sizing: border-box; /* Firefox 2 */
-ms-box-sizing: border-box; /* Internet Explorer 8 */
-webkit-box-sizing: border-box; /* Safari 3 */
-khtml-box-sizing: border-box; /* Konqueror */
}
</style>
<!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
<!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>
<body>
<form name="foo" action="#">
<div class="bb">div</div>
<input class="bb" size="20" name="bar" value="field">
</form>
</body>
</html>
该解决方案通过Erik Arvidsson编写的一些行为支持Internet Explorer 6和Internet Explorer 7，并通过Dean Edwards的一些调整来支持百分比和其他非像素宽度。
工作示例
行为（boxsizing.htc）
发生这种情况的原因是文本输入的大小由其大小属性确定。 在<input>标记内添加size =“50”。 然后将其更改为size =“100” - 请参阅我的意思？
我怀疑有更好的解决方案，但唯一想到的就是我在SO上的“隐藏HTML特性”问题上找到的东西：使用可编辑内容的div而不是输入。 将用户输入传递给封闭表单（如果这是您需要的）可能会有点棘手。
HTML的隐藏功能
你最好的选择是把你的边框，边距等输入到一个div中，并且输入的宽度为100％，没有边框，没有边距等。
例如，
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div {
border: 1px solid red;
padding: 5px;
}
input, form {
display: block;
width: 100%;
}
</style>
</head>
<body>
<form>
<div><input type="text" name="foo" /></div>
</form>
</body>
</html>