박스 크기 조정 : 파이어 폭스에서 스크롤 패딩 제거하는 방법을

이 다음은 샘플 코드이다 : 나는 100 %로 텍스트 영역의 폭을 더한 약간의 패딩을 설정하기 위해 상자 크기 조정 속성을 사용하고 작동 박스 크기 조정 : 파이어 폭스에서 스크롤 패딩 제거하는 방법을

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Sample Textarea</title> 
<style type="text/css"> 
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;} 
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;} 
</style> 
</head> 
<body> 
<form action="#"> 
<textarea rows="1" cols="1">This is some text.</textarea> 
</form> 
</body> 
</html>

모든 주요 브라우저에서. 그러나 파이어 폭스에서 텍스트 영역에 더 많은 컨텐츠를 추가하면 스크롤바 주변에 원하지 않는 패딩이 표시됩니다.

출처

2011-12-31 Mori

Firefox는 콘텐츠뿐만 아니라 스크롤바에도 패딩을 적용합니다. 그것은 다음과 같이 읽도록

은 textarea 스타일 정의를 변경

textarea 
{ 
    overflow:auto; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    line-height:26px; 
    padding: 0; 
    padding-left: 6px; 
}

이는 패딩 문제를 해결하지만, 한 번 텍스트의 두 개 이상의 라인이 다소 어색한 모양이있다.

출처

2011-12-31 17:34:46

답변 주셔서 감사합니다. 그러나 줄 높이가 너무 많아서 언급 한 것처럼 어색해 보입니다. – Mori

박스 크기 조정 : 파이어 폭스에서 스크롤 패딩 제거하는 방법을

답변

관련 문제