html - 在div容器中输入，不会拉伸(stretch)

Question

我有一个包含输入的 div。我希望输入能够拉伸(stretch)以填充可用空间，这在 Chrome 中有效，但在 IE 和 Firefox 中无效。

<div class="outer">
    <input type="text" />
</div>

.outer{
    width: 100%;
    height: 40px;

    position: relative;
}

input{
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;
}

JSFiddle:http://jsfiddle.net/wwMZg/1/

---

在 Chrome 中，它看起来像这样:

在 Firefox 和 IE 中，它显示如下:

---

• 在我的实际使用场景中，还有其他 div 包含 Angular 点图像，这就是为什么 top、left、right，在此示例中，bottom 值设置为 7px。

• 我想避免直接在输入上设置宽度，我不想在.outer上设置它。

  <

Answer 1

大多数输入元素都有内边距/边框。您需要使用 box-sizing 属性来调整元素尺寸的计算方式。

http://jsfiddle.net/wwMZg/5/

.outer {
    width: 100%;
    height: 40px;
}
.outer input {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://caniuse.com/#search=box-sizing