Firefox/IE textarea 크기 조정 - 해결 방법?

크롬, 파이어 폭스와 IE에서이 코드를 사용해보십시오 :Firefox/IE textarea 크기 조정 - 해결 방법?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Textarea problem</title> 
<style type="text/css"> 
html, body { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    border: 0; padding: 0; margin: 0; 
} 

#container { 
    position: absolute; 
    top: 4px;bottom: 4px; 
    right: 4px;left: 4px; 
    background-color: grey; 
} 

#ta { 
    position: absolute; 
    bottom: 0; right: 0; 
    top: 0; left: 0; 
    /*width: 100%; height: 100%;*/ 
    border: black 4px solid; padding: 0; margin: 0; 
    background-color: orange; 
    padding: 8px; 
} 
</style></head> 
<body> 

<div id="container"> 
    <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea> 
</div> 

</body> 
</html>

나는이뿐만 아니라 입력에 대해 어떻게 알 수 있습니다. 상/하단 및 왼쪽/오른쪽으로 암시 된 차원에 일반 블록 요소처럼 응답하지 않습니다.

제 대안은 테두리와 패딩을 컨테이너에 놓고 텍스트 영역 위치를 relative로, 너비/높이를 100 %로 설정하는 것입니다. 하지만 완벽하지는 않습니다. 텍스트 영역의 스크롤 막대가 패딩 내에 있으므로 UI 관점에서 받아 들일 수 없기 때문입니다.

누락 된 것이 있습니까? FF/IE에서 텍스트 영역의 위쪽/오른쪽/아래/왼쪽 작업을 어떻게 만들 수 있습니까?

출처

2010-05-25 Thomas

나는 정확하게 그 질문이 무엇인지 확신 할 수 없다. 구체적으로 당신이 달성하고자하는 무엇입니까? 편집 : 아, 알았어. 방금 크롬을 다운로드했습니다. :) – edl

IE의 어떤 버전에서 작동해야합니까? 당신이 relative-#ta의 위치를 변경하고 100%과의 폭과 높이를 설정하면

당신은

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

이 너무 IE8 +, 파이어 폭스 3.0 이상, 사파리와 오페라에서 작동하도록 추가 할 수 있습니다.

위쪽/오른쪽/아래쪽/왼쪽 속성은 실제로 더 이상 필요하지 않습니다.

출처

2010-05-25 16:02:38 mercator

Firefox/IE textarea 크기 조정 - 해결 방법?

답변

관련 문제