css - CSS 左上角和右下角缩放以适应，但不是在 Firefox 中？

Question

我有一个文本框，我想缩放以适应 div。这在 chrome 中很容易做到：

HTML：

<div id="div">
<textarea id="textarea"></textarea>
</div>

CSS：

#div {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4em;
}
#textarea {
    position:absolute;
    top:.2em;
    bottom:.2em;
    left:.2em;
    right:.2em;
    width:auto;
}

这在 chrome 中效果很好。另一方面，Firefox 似乎不喜欢同时拥有left:andright:或同时拥有top:and bottom:。它似乎比其他两个更喜欢top:和left:，并且不会像 chrome 那样缩放 textarea 以适应。有没有办法在 Firefox 中实现这一点，还是我必须等待 mozilla 自己实现？

编辑：jsfiddle，根据要求：http: //jsfiddle.net/Monchoman45/kKxus/

Answer 1

试试这个 -演示

#div {
    background: beige;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4em;
    padding: .2em;
}

#textarea {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 100%;
}