How to make Firefox render textarea the same way as in a div?

Question

I am trying to provide a consistent line width in pixels inside the text field through IE8, Firefox and Safari, so that the text content wraps the lines as predictably and consistently as possible.

Firefox does something a little strange: it has an extra indent pixel that feeds outside the space of the contents of the text field and two other browsers, and against a similar div block.

When applying this class to both textarea and div, the difference is visible, with the text in the div touching the outer left edge of the red background, but the text in the text field has an offset of 1 pixel, despite being filled to zero:

.testbox{ padding:0; margin:0; border:0; background: red; width: 40px; height: 40px; font-size: 12px; line-height: 16px; } 

Other fill values ​​displaying one additional offset pixel compared to the div.

Any ideas on whether there is a way to trick Firefox into rendering textarea as if it were a div, or adjust this non-padding-but-look-like-padding property for a text box?

Answer 1

I recently did some research on the problem described by the OP for a similar SO question . It seems that the error in Firefox causes the rendering of this so-called "non-complementary, but looking like padding" textarea elements.

Usually this add-on is not a problem, but it becomes a problem when you want the two elements to be the same width, and you make sure that its contents are wrapped equally in both elements.

Getting textarea to wrap content the same as, for example, div elements in Firefox

It seems impossible to get rid of this extended 1.5px on textarea in Firefox, so if you want to make sure that the flow around content inside a div in Firefox behaves exactly like the contents wrap inside textarea in Firefox, the best approach seems to be adding an extra 1.5px indentation on the right and left in the div , but only in Firefox. You can accomplish this by setting the following CSS prefix properties on your div :

 -moz-box-sizing: border-box; -moz-padding-end: 1.5px; -moz-padding-start: 1.5px; 

The first ensures that the padding set on the div does not increase the width of the div , and the next two ensure that 1.5px indentation is set to the right and left of the div .

This approach does not affect the rendering of div in any other browsers, it does not need it, since textarea in other browsers does not display an additional addition. But this ensures that there is no difference in content between div and textarea inside Firefox if they have the same font-family and font-size properties, etc.

Here's jsFiddle for demo purposes.

Getting textarea to continuously wrap content in browsers

If you just wanted to make sure that textarea in Firefox has the same width and wrapping behavior as textarea in other browsers, you can set its box-sizing to border-box , add padding to both sides of 5.5px and set -moz-padding-end and -moz-padding-start at 0px .

 textarea { padding: 0 5.5px 0 5.5px; -moz-padding-end: 0px; -moz-padding-start: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

Shown here is jsFiddle .

Answer 2

Wow, I don’t know the answer yet, but I tried something, and it seems that the text field, when you apply borders, margins and indents to it, does not change its width, but sets borders, etc. .. from the inside. Try the following:

 .testbox { padding: 10; margin: 10; border: 5px solid black; background: red; width: 40px; height: 40px; font-size: 12px; line-height: 16px; } 

You can get around this using something like this:

 <div class="testbox"> <textarea class="testarea"></textarea> </div> 

CSS

 .testbox { padding: 0; margin: 0; border: 0; background: red; width: 40px; height: 40px; font-size: 12px; line-height: 16px; } .testarea { padding: 0; margin: 0 -1px; border: 0; background: red; width: 100%; height: 100%; font-size: 12px; line-height: 16px; } 

This also works in IE, with the exception of -1px, which produces a layout (per unit).

Answer 3

This is a bug in firefox that was fixed a few days ago. The hotfix will be released with Firefox 29.

I already tried the last nightly build and the texture error was gone!

Answer 4

I ran into the same problem, and although my solution seemed too curved backwards for that one pixel, but it fixed the problem, it says: Unify width due to this weird behavior. Instead of using a div, I used a disabled text area with a white background and a default cursor to act as a facial expression of a div.

Answer 5

I had a similar problem, the link tag with background image and indentation didn’t display well on firefox. Uppercase and background seemed to apply to a line of text, and not to a block of text when multi-line. I checked a few things and ended up using "display: block"; on the css element. Worked for me.