CSS 왼쪽 위 및 아래 오른쪽 크기가 맞지만 Firefox에는 맞지 않습니까?

Question

div에 맞게 크기를 조정할 텍스트 상자가 있습니다. 이것은 크롬에서 쉽게 할 수 있었다 :

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; 
} 

. 반면에 파이어 폭스는 left:과 right: 또는 top:과 bottom:을 모두 갖고있는 것처럼 보이지 않습니다. 다른 두 가지에 비해 top: 및 left:을 선호하며 크롬에 맞게 텍스트 영역을 조정하지 않습니다. 파이어 폭스에서이를 수행 할 수있는 방법이 있습니까? 아니면 모질라가 직접 구현할 때까지 기다려야합니까?

편집 : 요청에 따라 jsfiddle : http://jsfiddle.net/Monchoman45/kKxus/

Answer 1

이 시도 - DEMO

#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%; 
}