输入与显示：块不是一个块，为什么不？ [英] input with display:block is not a block, why not?
问题描述
为什么 display：block; width：auto; 在我的文本输入不像div，填充容器宽度？我的印象是，div只是一个块元素与自动宽度。在下面的代码中，div和输入不应该有相同的尺寸？
Why does display:block;width:auto; on my text input not behave like a div and fill the container width? I was under the impression that a div is simply a block element with auto width. In the following code shouldn't the div and the input have identical dimensions?
如何获得输入填充宽度。 100％宽度无效，因为输入有填充和边框（最终宽度为1px + 5px + 100％+ 5px + 1px）。固定宽度不是一个选项，我正在寻找更灵活的东西。
How do I get the input to fill the width. 100% width won't work because the input has padding and a border (causing a final width of 1px + 5px + 100% + 5px + 1px). Fixed widths aren't an option, I'm looking for something more flexible.
我宁愿直接回答一个解决方法，这看起来像一个CSS怪诞，
I'd prefer a direct answer to a workaround, this seems like a CSS quirk and understanding it may be useful later.
<!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>
编辑：我应该指出，我已经可以用wrapper解决方法。除了这种与页面语义和CSS选择器关系的调整，我试图理解问题的性质，以及是否可以通过改变INPUT本身的性质来克服。
I should point out I can already do this with wrapper workarounds. Apart from this screwing with the page semantics and CSS selector relationships I'm trying to understand the nature of the problem and whether it can be overcome by changing the nature of the INPUT itself.
编辑2：好的，这真是奇怪！我发现解决方案是简单地添加 max-width：100％到输入 width：100％; padding：5px; / code>。然而，这引起了更多的问题（我会在一个单独的问题），但似乎宽度使用正常的CSS框模型和max-width使用IE边框框模型。非常奇怪。
EDIT 2: Ok, this is TRULY strange! I've found that the solution is to simply add max-width:100% to an input with width:100%;padding:5px;. However this raises even more questions (which i'll ask in a seperate question) but it seems that width uses the normal CSS box model and max-width uses the IE border-box model. How very odd.
编辑3：好的，最后一个似乎是FF3中的错误。 IE8和Safari4将max-width限制为100％+ padding + border，这是规范说的。最后，IE得到了正确的结果。
EDIT 3: Ok, that last one appears to be a bug in FF3. IE8 and Safari4 limit the max-width to 100% + padding + border which is what the spec says to do. Finally, IE got something right.
编辑4：哦，我的上帝，这是真棒！在玩这个过程中，并在古老的大师的帮助下 Dean Edwards 和 Erik Arvidsson ，I管理拼凑3个单独的解决方案，使一个真正的跨浏览器100％宽度的元素与任意填充和边框。请参见下面的答案。
EDIT 4: Oh my god, this is awesome! In the process of playing with this, and with much help from the venerable gurus Dean Edwards and Erik Arvidsson, I managed to piece together 3 seperate solutions to make a true cross-browser 100% width on elements with arbitrary padding and borders. See answer below. This solution does not require any extra HTML markup, just a class (or selector) and an optional behaviour for legacy IE.
推荐答案
此解决方案不需要任何额外的HTML标记，只需要一个类（或选择器）看看我想出了什么，一个解决方案使用相对未知的box-sizing：CSS3的边框盒样式。这允许在任何元素上的真100％宽度，而不管该元素的填充和/或边框。
Check out what I came up with, a solution using the relatively unknown box-sizing:border-box style from CSS3. This allows a 'true' 100% width on any element regardless of that elements' padding and/or borders.
<!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>
此解决方案通过由Erik Arvidsson撰写的行为支持IE6和IE7，并从Dean Edwards进行一些调整百分比和其他非像素宽度。
This solution supports IE6 and IE7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.
这篇关于输入与显示：块不是一个块，为什么不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
