拉伸輸入[類型=「文本」]，以填補空間

Question

我具有以下設置：

<div style="position: fixed; margin: 0px; background-color: black; height: 100px; width: 100%;"> 
    <input type="text" style="position: absolute; display: block; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: 30px 30px 15px 30px;" /> 
</div> 

意圖是拉伸標籤以填充含有<div>標記的空間（以下邊距，當然）。如果我將<input>標記更改爲<div>標記，則此功能適用於所有最新的瀏覽器，但如此處所示，此功能僅適用於WebKit瀏覽器（Chrome和Safari）。有沒有什麼辦法在FF和IE9 +中獲得理想的效果（只需IE10就足夠了）？

Answer 1

嘗試在給予％寬輸入.... 這件事會爲你工作

<div style="position: fixed; margin: 0px; background-color: black; height: 100px; width: 100%;"> 
    <input type="text" style="position: absolute; display: block; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: 30px 5% 15px 5%;width:90%" /> 
</div> 

Answer 2

如果您不需要支持IE 7或以下，你也許可以使用箱大小property：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp