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

【问题标题】：css: issue with width and padding of an input in IEcss：IE中输入的宽度和填充问题
【发布时间】：2010-11-13 13:45:08
【问题描述】：

我在 IE 中的 input[text] 字段的宽度上遇到问题，所有版本。

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

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

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

我知道 IE 的盒子模型在其宽度计算中包括边框和边距，所以按照所理解的那样，我仍然无法解决这个问题。

我还试图找到一个更好的解决方案，而不仅仅是将我的输入宽度设置为 240 像素并使用填充，因为此表单中有各种输入，其容器的大小各不相同，我想找到一个通用的解决方案。

这里有一些代码：

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

【问题讨论】：

标签： css input width

【解决方案1】：

最佳解决方案：Real solution

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

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

丑陋的解决方案，但也适用于旧版 IE：Here

【讨论】：

【解决方案2】：

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

【讨论】：

为 xhtml 过渡正确设置了文档类型。从 quirksmode 页面比较它们。我怀疑即使在严格模式下，IE 也会像在怪癖模式下一样对待表单元素。

【解决方案3】：

不计算最大宽度问题，IE 在这里做的是正确的事情。 CSS 盒子模型说一个元素的整体尺寸是宽度加上它的内边距，再加上它的边距。

盒子模型还说，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的 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;
}

【讨论】：

抱歉，这不起作用。即使您将输入设置为块级元素，它们仍然会缩小到默认大小。
如果您的父 DIV 浮动，您有时会遇到问题。查看我的编辑。
另外，尝试下载 IE Developer 工具栏，它可以让您在 IE 中查询文档以查看实际属性。

【解决方案4】：

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

【讨论】：