Textarea很奇怪的行爲

Question

請看看http://jsfiddle.net/g995s/。

<div id="textarea_wrapper"> 
    <textarea>How and where my width is derived from?</textarea> 
</div> 


#textarea_wrapper{ 
height: 250px; 
border:thick solid green; 
} 
textarea{ 
background-color: #930;  
border:none; 
margin:0; 
width:auto; 
resize:none; 
    overflow:hidden; 
height:95%; 
    padding-top:5%; 
} 

這是不可能的我解釋兩件事情：第一個是爲什麼textarea的推移其母公司之外，因爲身高+填充頂= 100％？ 第二個是如何以及從哪裏得到這個特定寬度的textarea？

謝謝

Answer 1

填充頂部百分比基於父元素的寬度，而不是高度。

因此，它是因爲95％的較小高度+ 5％的較大寬度= 100％以上的高度。

寬度是textarea的默認寬度，因爲在textareas上設置width: auto什麼都不做。

如果您不喜歡頂部和底部百分比如何工作，請將textarea的寬度和高度設置爲100％，並使用固定尺寸（如px或em）作爲填充。

然後在textarea上使用box-sizing: border-box使其寬度，高度和填充保持在其父項的100％以內; http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

在關於第一個問題，基於百分比padding-top值相對於寬度，沒有高度，因此，如果瀏覽器的寬度改變的定位不會是一致的 - 嘗試調整窗口大小以查看此信息。

8 Box model - 8.4 Padding properties

百分率的計算相對於所生成的框的包含塊的寬度。請注意，'margin-top'和'margin-bottom'也是如此。如果包含塊的寬度取決於這個元素，那麼結果佈局在CSS 2.1中是未定義的。

Answer 3

其padding-top是增加文本區域的大小

*編輯：捱打吧！ :)