Html textarea的高度与Firefox中的行不匹配

textarea的

行

属性与Firefox中的行数不匹配。例如：

<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>

1.
2.
3.
4.
这条线在FF中可见

例如：

---

如何解决此问题？对于

行=4

Firefox始终在文本字段后添加一行额外内容，文本区域应仅显示4行（而不是5行）。如果您希望它具有恒定的高度，请使用CSS，例如：

textarea {
    height: 5em;
}

编辑： 您还可以使用CSS扩展只针对Firefox浏览器。范例

@-moz-document url-prefix() {
    textarea {
        height: 5em;
    }
}

---

您可以使用JavaScript（或硬编码高度

4x1.2=4.8em

）固定高度

例如（JQuery），修复每个文本区域的问题：

$("textarea").each(function(){
    var lineHeight = parseFloat($(this).css("line-height"));
    var lines = $(this).attr("rows")*1 || $(this).prop("rows")*1;
    $(this).css("height", lines*lineHeight);
});

overflow-x: hidden;

line height

CSS属性的值等于每行（“行”）的高度。因此，当您定义了

行

时，此代码将固定高度

---

当未设置

rows

属性时，代码将查看默认值（

.prop（“rows”）

）。

我曾经遇到过同样的问题，无法使用CSS，因此JavaScript是唯一的方法：以下是Mootools和jQuery的方法：

Mootools：

window.addEvent('domready', function() {
if (Browser.firefox) {
    $$('textarea[rows]').each(function(el) {
        if (!el.retrieve('ffRowsFixed')) {
            var rows = el.get('rows').toInt();
            if (rows > 1) el.set('rows', (rows - 1));
            el.store('ffRowsFixed', true);
        }
    });
}
});

jQuery：

$(document).ready(function() {
if ($.browser.mozilla) {
     $('textarea[rows]').each(function(i, el) {
         if (!$(el).data('ffRowsFixed')) {
             var rows = parseInt($(el).attr('rows'));
             if (rows > 1) {
                 $(el).attr('rows', (rows - 1));
             }
             $(el).data('ffRowsFixed', true);
         }
     });
}
});

---

它将检查浏览器是否为firefox，如果为firefox，它将检查行是否已更正，如果未更正，它们将被修复。

有很多答案，但不适合我：

• CSS规则（

  高度：5em；

  ）不够灵活，因为它完全覆盖了

  行

  属性
• 我不想使用JavaScript

有一个“bug”：

所以我的解决方案是：

FF向文本区域添加高度以保留滚动条的位置

我不需要水平滚动条，因此它有助于解决问题：可以将以下css规则添加到textarea：

$("textarea").each(function(){
    var lineHeight = parseFloat($(this).css("line-height"));
    var lines = $(this).attr("rows")*1 || $(this).prop("rows")*1;
    $(this).css("height", lines*lineHeight);
});

overflow-x: hidden;

---

。它甚至适用于

行=1

我是否理解“不可见”是指用户必须向下滚动？如果是这样，只需更改“行=5”。否则请解释“不可见”是什么意思。@Martin我指的是你提到的。但该行不应根据w3s显示：设置文本区域的高度（以行为单位）。实际上，W3C声明»该属性指定可见文本行的数量。«不知道w3s应该是什么，也不知道该引用来自何处。但是，相同的内容。w3学校是一个不可靠的资源。如果所需行数=1，则不修复textarea。$。自jQuery 1.9.0以来，浏览器已被删除，这会使开发人员的生活更加复杂。设置溢出非常适合我，谢谢！我认为FF为滚动条腾出空间可以解释这种差异。对我来说，我还必须将

行高

和

字体大小

设置为1em，然后所有3个浏览器看起来都一样。。。和

overflow-y：隐藏“修复”了我的Firefox，但Chrome似乎为垂直滚动条保留了一个空间。