文本区域的高度与 Firefox 中的行不匹配

Question

文本区域的 rows 属性与 Firefox 中的行数不匹配。例如：

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

示例： http://jsfiddle.net/Z7zXs/6/

我该如何解决这个问题问题？对于 rows=4，文本区域应仅显示 4 行（而不是 5 行）。

Answer 1

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

• CSS 规则 (height: 5em;) 不够灵活，因为它完全覆盖 rows 属性
• 而且我不想要使用 JavaScript

有一个“bug”： TEXTAREA 错误地应用了 ROWS= 和 COLS=

所以这是我的解决方案：

FF 向 TextArea 添加高度以预留滚动条的位置。

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

overflow-x: hidden;

Here是示例。它甚至适用于 rows=1。

Answer 2

Firefox 总是在文本字段后添加一行。如果你希望它具有恒定的高度，请使用 CSS，例如：

textarea {
    height: 5em;
}

http://jsfiddle.net/Z7zXs/7/

编辑：
您还可以使用 @-moz-document url-prefix CSS 扩展仅针对 Firefox 浏览器。例子

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

Answer 3

您可以使用 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);
});

CSS 属性 line-height 的值等于每行（“row”）的高度。因此，当您定义了 row 后，此代码将修复高度。

当 rows 属性未设置时，代码将查看默认值 (.prop("rows"))。

Answer 4

我曾经遇到过同样的问题，但我无法使用 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);
         }
     });
}
});

It will check if the browser is firefox, if is,它将检查行是否已被更正，如果没有，它们将被修复。