html - Textarea and div padding differences in Firefox -


i made fiddle here. http://jsfiddle.net/pmver/

the textarea , div render identically in both safari , chrome. in firefox, there 2px padding on right of textarea, affects word wrapping.

what's mysterious without white-space: pre-wrap; padding seems vary depending on width of element.

i can fix detecting firefox , adding padding-right:2px div, know if can fixed without 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 eiusmod tempor incididunt...</textarea> <div contenteditable="true">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt...</div> 

edit

the example provided above fixed width you'd able see problem need work expanding widths this. http://jsfiddle.net/pmver/6/

i can reproduce described behaviour on firefox 20.0.1 using jsfiddle.

i have had bit of around you, seems firefox has had quite some issues paddings in combination textareas in past, i'm thinking might not able rid of it.

i'm not sure if class vendor specific prefixes browser hack, i've got 1 you.

you can add -moz-padding-start: 2px; , -moz-padding-end: 2px; css rule, fix wrapping issue: jsfiddle.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -