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

Question

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

我有一个明确设置宽度为 250 像素的 div。 在这个 div 中，我有一个宽度设置为 100% 的输入文本字段。此输入还具有 10 像素的内部左填充。

在 IE 中，它将宽度呈现为 100% + 10px。我想不出一种方法来限制容器的宽度。

此问题最初出现在所有浏览器中，但在 FF、Safari 和 Chrome 中通过添加 max-width:100% 很容易解决。 IE6/7 不支持这个，而 IE8 支持，但它仍然会在宽度上添加填充。

我知道 IE 的盒模型在其宽度计算中包括边框和边距，因此根据我的理解，我仍然想不出解决这个问题的方法。

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

这是一些代码:

<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