css - 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 在 height+padding-top=100% 之后超出了它的父级？第二个是这个特定宽度的 textarea 是如何以及从哪里得出的？

谢谢

Answer 1

关于第一个问题，基于百分比的padding-top值是相对于宽度的，而不是高度，因此如果浏览器的宽度改变，定位将不一致- 尝试调整窗口大小以查看此内容。

8 Box model - 8.4 Padding properties

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.