在div容器中输入，不会拉伸

Question

我有一个包含输入的div。我希望输入延伸以填充可用空间，这适用于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，这就是为什么top，left，right，bottom值为在此示例中设置为7px。

• 我想避免直接在input上设置宽度，我不想在.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

Answer 2

如果您因为需要支持旧浏览器而无法使用box-sizing，并且不介意在标记中添加其他元素，则可以使用中间div

CSS

.outer{
    width: 100%;
    height: 40px; 
    position: relative;
}

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

input{
    width: 100%;
}

HTML

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

小提琴：http://jsfiddle.net/2mFgR/

Answer 3

控制输入元素的拉伸和高度

这个样式问题有点吸引人，因为input元素似乎有自己的一套规则。

考虑以下HTML：

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

和CSS：

.outer {
    width: 100%;
    font-size: 20px;
    background-color: green;
    overflow: auto;
}
.inner {
    margin: 7px;
}
input {
    font-size: inherit;
    width: 100%;
    border: none;
} 

将.inner元素中的输入字段包装成允许它扩展到100％而不会触发顶级容器上的水平溢出。

但是，除非在输入字段上设置border: none，否则边距不会完全对称。这可以使用box-sizing来修复，以处理边框的宽度。

关于height属性，input的行为类似于常规的内联，非替换元素，也就是说，高度值不适用，您需要使用font-size来控制高度。

请参阅 jsFiddle

上的演示

Answer 4

为您的输入样式添加宽度：100％

    .outer{
    width:100%;
    height: 40px;
    position:absolute;
 }

input{
    position:relative;
    top: 7px;
    bottom: 7px;
    width:100%;
    padding:0px;
    margin-left:-1px;
    border:1px solid gray;
}

它是在IE中抵消它的边界