파이어 폭스의 Textarea 및 div 패딩 차이점

나는 여기에 바이올린을 만들었습니다. http://jsfiddle.net/pmVeR/파이어 폭스의 Textarea 및 div 패딩 차이점

textarea과 div은 Safari와 Chrome에서 모두 동일하게 렌더링됩니다. 하지만 Firefox에서는 단어 줄 바꿈에 영향을 미치는 textarea의 오른쪽에 여분의 2px 패딩이 있습니다.

또한 신비한 점은 white-space: pre-wrap; 없이는이 여분의 패딩이 요소의 너비에 따라 달라지는 것입니다.

FireFox를 감지하고 을 (를) div에 추가하여 해결할 수 있지만 브라우저 해킹없이 해결할 수 있는지 알고 싶습니다.

CSS

div, textarea { 
    font-family: Courier; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    outline: 0; 
    resize: none; 
    border: 1px solid black; 
    width: 282px; 
    height: 80px; 
    white-space: pre-wrap; 
    overflow: hidden; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

HTML

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</textarea> 
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</div>

편집

제가 위에서 제공하는 예는 고정 폭 문제를 볼 수있을 거라고 있도록하지만, 나는 너비를 너무 넓히기 위해 일해야한다. 이. http://jsfiddle.net/pmVeR/6/

출처

2013-05-13 Berry Blue

잘 작동합니다. Chrome (26.0.1410.64)과 Firefox (20.0.1) 모두 동일한 문자로 텍스트 줄 바꿈을 사용하여 두 요소를 동일한 너비로 표시합니다. –

나를 위해 동일합니다. 가능한 수정은 특별히 패딩을 추가하는 것입니다. '패딩 : 4px;' 예를 들면. – lukeocom

@lukeocom - '너비'를 가지고 놀면 문제가 나타날 수 있습니다. 파이어 폭스에서 '너비 : 275px;'를 설정하면 그것을 볼 수 있습니다. –

는 I이 jsFiddle을 사용 Firefox 20.0.1에서 설명한 동작을 재현 할 수있다.

나는 파이어 폭스가 과거에 combination with textareas에 paddings와 매우 some issues 있었다 것 같다, 당신을 위해 주위를 살펴 조금 있었다, 그래서 나는 당신이 그것을 제거하지 못할 수 있습니다 생각하고 있어요.

납품업자 특정한 접두어를 브라우저 전세 마차로 분류하는 경우에 확실하지 않다, 그러나 나는 당신을 위해 그것을있다. jsFiddle :

당신은 당신의 포장 문제를 해결하는 것, 당신의 CSS 규칙에 -moz-padding-start: 2px; 및 -moz-padding-end: 2px;를 추가 할 수 있습니다.

출처

2013-05-13 13:34:22

감사! 이것은 내가 찾고 있던 접두사 였지만 당신은 단지 그것을 div에 적용하기를 원했습니다. http://jsfiddle.net/pmVeR/7/ 또한 padding이 div/textarea에 대한 것이면 -moz-padding-end에 2px를 추가해야합니다. 내 예제에서는 패딩을 4px로 변경 했으므로 -moz-padding-end는 6px입니다. 또한 귀하의 바이올린에서 "공백 : 사전 감싸기"를 제거했습니다. 그러나 이것은 머물러 있어야합니다. –

답변을 업데이트했습니다. 진행중인 추가 패딩이있었습니다. 나는'white-space : pre-wrap; '이 행동에 변화를 가져올 것이라고 생각하지 않지만 어쨌든 그것을 다시 추가했다. –

리셋 CSS를 사용할 수도 있습니다.

출처

2013-05-13 09:16:05 dsfg

파이어 폭스의 Textarea 및 div 패딩 차이점

답변

관련 문제