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

Question

我在IE浏览器中遇到了input[text]字段宽度的问题，所有版本都有这个问题。

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

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

- bob

Answer 1

Best solution: Real solution

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

这个代码可以在IE8+和其它现代浏览器上正常工作。

虽然不太美观，但也可以在较旧的IE浏览器中使用： 这里

- elon

Answer 2

1. 在怪异模式下，IE使用了错误的盒模型。因此，您可能需要触发严格模式。例如，参见http://www.quirksmode.org/css/quirksmode.html

2. 您想让输入框与容器一样宽吗？请明确设置宽度（250px - 10px用于填充 - XXpx用于边框）。您不想让输入框比div更宽吗？请将div的溢出设置为隐藏。

- Residuum

---

文档类型已正确设置为xhtml transitional。与quirksmode页面进行了比较。我怀疑即使在严格模式下，IE也会像在quirks模式下一样处理表单元素。 - bob

Answer 3

除了max-width问题，IE在这里做得很对。CSS盒模型规定元素的整体大小是宽度加上内边距再加上外边距。

盒模型还规定，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的100%。您可以利用这一点，将输入框的宽度设置为“auto”，然后明确设置填充、边框和外边距。

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

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

- Dave Markle

---

抱歉，但那样做不起作用。即使您将输入设置为块级元素，它们仍会缩小到其默认大小。 - bob

你在父级 DIV 使用浮动时有可能会遇到问题。请参考我的编辑。 - Dave Markle

另外，尝试下载IE开发者工具栏，它可以让您在IE中查询文档以查看实际属性是什么。 - Dave Markle

Answer 4

请查看：http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html 我已经采用了第二种解决方案。

- Pavlo Neiman