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

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

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

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

这个问题最初出现在所有浏览器中，但在FF、Safari和Chrome中通过添加最大宽度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>

在怪癖模式下，错误的盒子模型适用于IE。因此，您可能需要触发严格模式。见例

要使输入与容器一样宽吗？明确设置宽度（填充为250px-10px，边框为XXpx）。是否希望输入的宽度不超过div？将div的溢出设置为隐藏

---

不包括最大宽度问题（这里做得对）。CSS框模型表示元素的总大小是宽度加上填充，再加上边距

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

这里有一个小例子（我知道这是很多标记，但为了说明这一点，这有点过头了）

选中此项： 我遵循了第二种解决方案。

最佳解决方案：

这一款适用于IE8+和所有其他现代浏览器

---

丑陋的解决方案，但也适用于较旧的IE:

为xhtml过渡设置了正确的doctype。从quirksmode页面比较它们。我怀疑即使在严格模式下，也会像对待怪癖模式一样对待表单元素。对不起，这不起作用。即使将输入设置为块级元素，它们仍会收缩到默认大小。如果父DIV浮动，有时会出现问题。查看我的编辑。此外，请尝试下载IE开发者工具栏，它将允许您在IE中查询文档，以查看实际属性。

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

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

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