javascript - FF 和 chrome 中的文本区域以相同的大小显示

Question

我有一个正在自动调整大小的文本区域，为此我使用了 scrollHeight 属性。 FF 看起来与 Chrome 非常不同，即使在页面刚刚加载且字段为空时也是如此。我看过一些建议(比如 stackoverflowlink )，但我不确定如何让它们看起来一样

这是负责调整大小的代码:

 $('#idTextArea').each(function () {
        this.setAttribute('style', 'overflow-y:hidden;width:600px;');
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        console.log("this.scrollHeight",this.scrollHeight);

      }).on('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
});

这是字段:

<textarea id="idTextArea" 
      name="textName"
      maxlength="200"
      style="width: 600px;"><%=controller.getText("textName") == null? "":controller.getText("textName")%></textarea>

当我的页面加载时，console.log 在 Chorme 上打印 26，在 FF 上打印 49。所以我的问题是:如何让它们看起来一样？

Answer 1

也许尝试添加:box-sizing: content-box; 到你的文本区域。