5

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

我有一个明确设置宽度为 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;}
4

4 回答 4

6

最佳解决方案：真实解决方案

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

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

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

于 2012-11-15T12:06:28.320 回答
2

  1. 错误的盒子模型适用于 IE 的 quirks 模式。因此，您可能需要触发严格模式。参见例如http://www.quirksmode.org/css/quirksmode.html

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

于 2009-07-23T22:28:33.910 回答
0

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

于 2011-04-22T15:27:22.247 回答
0

不算最大宽度问题，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;
}
于 2009-07-23T22:40:11.937 回答