统一文本框在IE、Firefox下的效果

统一文本框在IE、Firefox下的效果

textarea在IE是默认有滚动条的，而FireFox和谷歌浏览器（Google Chrome）下没有滚动条的。

    解决方法:
    1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；
    2、让滚动条自适应：overflow-y:auto。

    3、使用js来自适应高度

<style type="text/CSS">
        #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;
        }
</style>
<script language="JavaScript">

        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";
        }

</script>
 <span>test textarea</span><br>
<textarea id="content"  rows="2" cols="10" onkeyup="setRows();"></textarea>

    当输入连续字符超出textarea宽度边界时，ie会自动换行，而FF会出现水平滚动条。

    解决方法:
    1、你可以设 overflow-x:hidden;将超出部分隐藏。

    2、使用js，但需考虑手动换行,中英文还有英文单词。