Html textarea 的高度与 Firefox 中的行不匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7695945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Height of textarea does not match the rows in Firefox
提问by Serg
The textarea's rowsattribute does not match the number of lines in Firefox. For instance:
textarea 的rows属性与 Firefox 中的行数不匹配。例如：
<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>
Example: http://jsfiddle.net/Z7zXs/6/
示例：http: //jsfiddle.net/Z7zXs/6/
How can I fix this issue? The textarea should only display 4 lines (instead of 5) for rows=4.
我该如何解决这个问题？对于 .textarea 应该只显示 4 行（而不是 5 行）rows=4。
采纳答案by Lekensteyn
Firefox always adds an extra line after the textfield. If you want it to have a constant height, use CSS, e.g.:
Firefox 总是在文本字段后添加额外的一行。如果您希望它具有恒定的高度，请使用 CSS，例如：
textarea {
height: 5em;
}
EDIT:You can also use the @-moz-document url-prefixCSS extension to target only the Firefox browser. Example
编辑：您还可以使用@-moz-document url-prefixCSS 扩展来仅针对 Firefox 浏览器。例子
@-moz-document url-prefix() {
textarea {
height: 5em;
}
}
回答by Serg
There are lot of answers but wasn't suitable for me:
有很多答案，但不适合我：
- CSS rule (
height: 5em;) is not flexible enoutgh because it completely overridesrowsattribute - And I don'n want to use JavaScript
- CSS 规则 (
height: 5em;) 不够灵活，因为它完全覆盖了rows属性 - 我不想使用 JavaScript
There is a "bug": TEXTAREA incorrectly applying ROWS= and COLS=
有一个“错误”：TEXTAREA 错误地应用了 ROWS= 和 COLS=
So here is my solution:
所以这是我的解决方案：
FF adds height to the TextArea to reserve place for scroll-bars.
FF 将高度添加到 TextArea 以保留滚动条的位置。
I don't need horizontal scroll bar so it helps with fixing the issue: following css rule can be added to textarea:
我不需要水平滚动条，因此它有助于解决问题：可以将以下 css 规则添加到 textarea：
overflow-x: hidden;
Here is example. It works even with rows=1.
这是示例。它甚至可以与rows=1.
回答by Rob W
You can fix the height by using JavaScript (or hard-code a height of 4x1.2 = 4.8em).
您可以使用 JavaScript 固定高度（或硬编码高度为4x1.2 = 4.8em）。
Example (JQuery), fix the issue for each textarea:
示例（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);
});
The value of the line-heightCSS property equals the height of each line ("row"). So, when you've defined row, this code will fix the height.
line-heightCSS 属性的值等于每行（“行”）的高度。因此，当您定义 时row，此代码将修复高度。
When the rowsattribute is not set, the code will have a look at the default value (.prop("rows")).
rows未设置该属性时，代码将查看默认值 ( .prop("rows"))。
回答by Stephan Wagner
I've had the same problem once and i couldn't use CSS, so JavaScript is the only way: Here's the Mootools and jQuery ways to do this:
我曾经遇到过同样的问题，我无法使用 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:
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 it is, it will check if the rows have been corrected already, and if not they will get fixed.
它将检查浏览器是否是 Firefox，如果是，它将检查行是否已经更正，如果不是，它们将得到修复。
