Unified results solution for textarea in IE and Firefox

Source: Internet
Author: User

if you use the attribute word width (Cols) and number of rows (rows) of textarea to control the size of textarea, in IE and FF, the number of words in each line and the number of lines in the text are not the same, and IE has a scroll bar by default when the number of words is insufficient, while FF has no scroll bar.

how to control the same effect of textarea in IE and FF is actually relatively simple:

1. Use the width (widht) and height of textarea to define the size of textarea.
2. Make the scroll bar adaptive: overflow-Y: auto.

original

in IE, if the length of the character entered to textarea exceeds the display width of textarea, automatic line feed will appear. If the width of textarea is not limited by clear PX (for example, the percentage is used), The textarea automatically becomes wider when you re-display the textarea, to accommodate all input characters in a row. This will disrupt the page layout in certain situations. For example, this textarea is placed in a dialogue of a div.

when FF is used, no line breaks are automatically generated. FF automatically adds a water scroll bar for characters beyond the width of textarea to facilitate drag display. Even if textarea is re-displayed, the width will not change automatically. Therefore, FF's support for textarea remains unchanged, but stable.

I found some solutions on the Internet. It seems that many people have encountered similar problems and finally selected two materials for reference:

How to unify the effects of textarea in IE and Firefox
unify the effects of textarea in IE and Firefox

my final choice the scheme is to use Px to limit the width of textarea, in this way, the display in ff and IE is basically the same, except that the IE will still wrap automatically, but the biggest advantage of such a Width limit is that it will not make IE's automatic width change disrupt the entire layout.

when solving browser compatibility problems, some problems need to be carefully considered:

1. what are the problems that need to be solved urgently? Is it the customer's requirement or make the page consistent in different browsers

2. what are the consequences of different solutions and what are better suited to customers' needs?

3. the input-output ratio of different solutions

the answer to these questions determines the investment time and workload, is it necessary to take time to find some technical skills to solve problems that don't require too much attention, thus ignoring the most important customer needs.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.