css：IE 中输入的宽度和填充问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1174804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: issue with width and padding of an input in IE
提问by elon
I'm having a problem with widths on input[text] fields in IE, all versions.
我在 IE 中的 input[text] 字段上的宽度有问题，所有版本。
I have a div with an explicitly set width of 250px. In this div, I have an input text field with width set to 100%. This input also has an internal left-padding of 10px.
我有一个明确设置宽度为 250px 的 div。在这个 div 中，我有一个宽度设置为 100% 的输入文本字段。这个输入也有一个 10px 的内部左边距。
In IE, it renders the width as 100% + 10px. I cannot figure out a technique for constraining the width to the container.
在 IE 中，它将宽度呈现为 100% + 10px。我想不出一种将宽度限制到容器的技术。
This problem initially occurred in all browsers, but was very easy to fix in FF, Safari and Chrome by adding max-width:100%. IE6/7 don't support this, while IE8 does but it also still adds the padding to the width.
这个问题最初出现在所有浏览器中，但通过添加 max-width:100% 在 FF、Safari 和 Chrome 中很容易解决。IE6/7 不支持这一点，而 IE8 支持，但它仍将填充添加到宽度。
I understand that IE's box model includes border and margin in its width calculations, so with that given as understood I still can't figure a way around this.
我知道 IE 的框模型在其宽度计算中包含边框和边距，因此根据所理解的内容，我仍然无法解决这个问题。
I'm also trying to find a better solution than just setting my input widths to 240px with the padding, because there are various inputs in this form who's containers vary in size and I'd like to find a universal solution.
我还试图找到一个更好的解决方案，而不仅仅是将我的输入宽度设置为 240px 填充，因为这种形式有各种输入，它们的容器大小不同，我想找到一个通用的解决方案。
Here's some code:
这是一些代码：
<div class="places_edit_left">
<h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
<input type="text" value="" name="phoneNumber"/>
<h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
<input type="text" value="" name="address"/>
</div>
CSS
CSS
.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}
回答by elon
Best solution: Real solution
最佳解决方案：真正的解决方案
.content {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This one will work for IE8+ and of course all other modern browsers
这个适用于 IE8+，当然也适用于所有其他现代浏览器
Ugly solution, but work also in older IE: Here
丑陋的解决方案，但也适用于较旧的 IE：这里
回答by Residuum
The wrong box model applies to IE in quirks mode. Therefore, you may need to trigger strict mode. See e.g. http://www.quirksmode.org/css/quirksmode.html
You want to make the input as wide as the container? Set width explicitely (250px - 10px for padding - XXpx for borders). You want the input to not be wider than the div? Set overflow for div to hidden.
错误的框模型适用于 quirks 模式下的 IE。因此，您可能需要触发严格模式。参见例如http://www.quirksmode.org/css/quirksmode.html
您想让输入与容器一样宽吗？明确设置宽度（250px - 10px 用于填充 - XXpx 用于边框）。您希望输入不比 div 宽吗？将 div 的溢出设置为隐藏。
回答by Dave Markle
Not counting the max-width issue, IE is doing the right thing here. The CSS box model says that an element's overall size is the width PLUS its padding, PLUS its margins.
不计算最大宽度问题，IE 在这里做的是正确的事情。CSS 框模型说元素的整体大小是宽度加上它的填充，加上它的边距。
The box model also says that for any non-floating block level element, the entire size of the element (including everything) is always 100% of the containing element. You can use this to your advantage by setting the width of your input box to be "auto", and then setting your paddings, border, and margins explicitly.
盒模型还表示，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的 100%。您可以通过将输入框的宽度设置为“自动”，然后明确设置填充、边框和边距来充分利用这一点。
Here's a little example (I know this is a lot of markup, but this is a bit of overkill to illustrate the point),
这是一个小例子（我知道这是很多标记，但为了说明这一点有点矫枉过正），
.places_edit_left{
width:250px;
overflow:auto;
}
.places_edit_left input {
padding-right:0px;
padding-left:10px;
margin: 0 0 0 0;
border:1px solid black;
width:auto;
display:block;
float:none;
}
回答by Pavlo Neiman
Check this: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.htmlI've followed the second solution.
检查这个：http: //vitaly.harisov.name/example/broken-input-width-computation-in-msie.html我遵循了第二个解决方案。
