Skip to content


统一textarea在IE、Firefox下的效果

textarea在IE是默认有滚动条的,而FF没有滚动条的。 解决方法: 1、用textarea的宽度(widht)和高度(height)来定义textarea的大小; 2、让滚动条自适应:overflow-y:auto。 3、使用js来自适应高度

#content { font-size: 12px; overflow:hidden; background-color: #fff; color: #000; padding-right:5px; padding-left:5px; font-family: courier; width:100px; letter-spacing:0; line-height:12px; border-style:1px #ccc solid; } function setRows() { var textarea = document.getElementById(“content”); var cols = textarea.cols; var str = textarea.value; // windows – replace \r\n // mac – replace just \r // linux – is just \n str = str.replace(/\r\n?/, “\n”); var lines = 2; var chars = 0; for (i = 0; i < str.length; i++) { var c = str.charAt(i); chars++; if (c == "\n" || chars == cols) { lines ++; chars = 0; } } textarea.setAttribute("rows", lines); textarea.style.height = lines*12 + "px"; } test textarea

当输入连续字符超出textarea宽度边界时,ie会自动换行,而FF会出现水平滚动条。 解决方法: 1、你可以设 overflow-x:hidden;将超出部分隐藏。 2、使用js,但需考虑手动换行,中英文还有英文单词。

Posted in HTML/XHTML/CSS, JavaScript/DOM/XML, 技术.


2 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Continuing the Discussion

  1. 解决IE和FF下textarea换行不一致的问题 « IDEAL Garden linked to this post on 2009/03/17

    […] 如何统一textarea在IE、Firefox下的效果统一textarea在IE、Firefox下的效果 […]

  2. IDEAL Garden » Blog Archive » 解决IE和FF下textarea换行不一致的问题 linked to this post on 2009/03/20

    […] 如何统一textarea在IE、Firefox下的效果统一textarea在IE、Firefox下的效果 […]



Some HTML is OK

or, reply to this post via trackback.