Textarea and div padding differences in Firefox

Question

I made a fiddle here. http://jsfiddle.net/pmVeR/

The textarea and div render identically in both Safari and Chrome. But in Firefox, there is an extra 2px padding on the right of the textarea, which affects the word wrapping.

What's also mysterious is that without white-space: pre-wrap; this extra padding seems to vary depending on the width of the element.

I can fix this by detecting FireFox and adding padding-right:2px to my div, but I would like to know if this can be fixed without a browser hack?

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>

EDIT

The example I provided above is fixed width so you'd be able to see the problem but I need it to work for expanding widths too like this. http://jsfiddle.net/pmVeR/6/

Answer 1

I can reproduce the described behaviour on Firefox 20.0.1 using this jsFiddle.

I have had a bit of a look around for you, it seems that Firefox has had quite some issues with paddings in combination with textareas in the past, so I'm thinking you might not be able to get rid of it.

I'm not sure if you would class vendor specific prefixes as a browser hack, but I've got one for you.

You can add -moz-padding-start: 2px; and -moz-padding-end: 2px; to your CSS rule, that will fix your wrapping issue: jsFiddle.

Answer 2

you can use reset css for that too.