Question

IE在所有版本的输入[文本]字段中都有宽度问题。

我有一个显式设置宽度为250px的div。在这个div中，我有一个宽度设置为100％的输入文本字段。此输入还具有10px的内部左填充。

在IE中，它将宽度渲染为100％+ 10px。我无法找到一种限制容器宽度的技术。

此问题最初发生在所有浏览器中，但通过添加max-width：100％，很容易在FF，Safari和Chrome中修复。 IE6 / 7不支持这一点，虽然IE8可以，但它仍然会在宽度上添加填充。

据我所知，IE的盒子模型在宽度计算中包含了边框和边距，所以根据理解，我仍然无法解决这个问题。

我也试图找到一个更好的解决方案，而不仅仅是使用填充将输入宽度设置为240px，因为这种形式的各种输入容器的大小各不相同，我想找到一个通用的解决方案。 / p>

以下是一些代码：

<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

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

Answer 1

最佳解决方案：Real solution

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

这个适用于IE8 +，当然还适用于所有其他现代浏览器

丑陋的解决方案，但也在较旧的IE中工作：Here

Answer 2

错误的盒子模型适用于怪癖模式的IE。因此，您可能需要触发严格模式。参见例如http://www.quirksmode.org/css/quirksmode.html
您想让输入与容器一样宽吗？明确设置宽度（250px - 10px用于填充 - XXpx用于边框）。您希望输入不比div宽吗？将div的溢出设置为隐藏。

Answer 3

不计算最大宽度问题，IE在这里做正确的事情。 CSS框模型表示元素的整体大小是其填充的宽度PLUS，加上其边距。

框模型还表示，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的100％。您可以通过将输入框的宽度设置为“自动”，然后明确设置填充，边框和边距来使用此功能。

这是一个小例子（我知道这是一个很多的标记，但这有点过分无法说明这一点），

.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;
}

Answer 4

检查一下：http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html 我遵循了第二个解决方案。

css：IE中输入的宽度和填充问题

4 个答案: