input与显示：块不是一个块，为什么不呢？
为什么display:block;width:auto; 在我的文字input不像一个div和填充容器的宽度？ 我觉得div只是一个自动宽度的块元素。 在下面的代码不应该div和input具有相同的尺寸？
我如何获得input来填充宽度。 由于input有填充和边框（导致最终宽度为1px + 5px + 100％+ 5px + 1px），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>
编辑：我应该指出，我已经可以做到这一点与包装解决方法。 除了这个与页面语义和CSSselect器关系的拧紧，我试图理解问题的本质，以及是否可以通过改变INPUT本身的性质来克服。
编辑2：好吧，这是真的很奇怪！ 我发现解决scheme是简单地添加max-width:100% ， width:100%;padding:5px; 。 然而，这引发了更多的问题（我会问在一个单独的问题），但似乎宽度使用正常的CSS框模型和最大宽度使用IE边框模型。 真奇怪
编辑3：好的，最后一个似乎是FF3中的错误。 IE8和Safari4将最大宽度限制为100％+填充+边框，这是规范要求的。 最后，IE得到了正确的东西。
编辑4：哦，我的上帝，这真棒！ 在玩这个游戏的过程中，在古老的大师Dean Edwards和Erik Arvidsson的帮助下 ，我设法拼凑出三个独立的解决scheme，在任意填充和边框的元素上实现真正的跨浏览器100％的宽度。 见下面的答案。 这个解决scheme不需要任何额外的HTML标记，只需要一个类（或select器）和一个可选的传统IE浏览器的行为。
看看我想出了一个解决scheme，使用CSS3中相对未知的box-sizing：border-box样式。 这允许在任何元素上“真”100％的宽度，而不pipe那些元素的填充和/或边界。
<!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; /* css3 rec */ -moz-box-sizing: border-box; /* ff2 */ -ms-box-sizing: border-box; /* ie8 */ -webkit-box-sizing: border-box; /* safari3 */ -khtml-box-sizing: border-box; /* konqueror */ } </style> <!-- The voodoo gets scary. Force IE6 and IE7 to support IE5'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>
这个解决scheme通过Erik Arvidsson编写的行为来支持IE6和IE7，Dean Edwards做了一些调整，以支持百分比和其他非像素宽度。
工作示例
行为（boxsizing.htc）
发生这种情况的原因是文本input的大小由其大小属性确定。 在<input>标签内添加size =“50”。 然后将其更改为size =“100” – 请参阅我的意思？
我怀疑有一个更好的解决scheme，但唯一想到的是我发现在HTML的“隐藏function”问题上的SO：使用内容可编辑的div，而不是input。 将用户input传递给封闭表单（如果这是你所需要的）可能有点棘手。
HTML的隐藏function
你最好的select是把你的边框，边距等input到一个div中，并且input里面的宽度是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>
你可以像这样伪造它：
<!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, #inputWrapper { border: 1px solid red; } #topDiv { padding: 5px; height: 5px; } form { display: block; } #inputWrapper { overflow: hidden; height: 15px; } input { display: block; width: 100%; border-style: none; padding-left: 5px; padding-right: 5px; height: 15px; } </style> </head> <body> <div id="topDiv"></div> <form> <div id="inputWrapper"> <input type="text" name="foo" /> </div> </form> </body> </html>
你也可以像这样伪造它：
宽度：汽车
<style> .container { width:90%; } .container div{ border: 1px solid red; padding: 5px; font-size:12px; width:100%; } input{ width:100%; border: 1px solid red; font-size:12px; padding: 5px; } form { margin:0px; padding:0px; } </style> </head> <body> <div class="container"> <div> asdasd </div> <form action=""> <input type="text" name="foo" /> </form> </div> </body> </html>
尝试这个：
form { padding-right: 12px; overflow: visible; } input { display: block; width: 100%; }
我有同样的问题。 我添加了边界到我的input，所以他们成为块。
