html - 更改文本区域中的行高会导致 IE9 和 IE10 中出现垂直滚动条

Question

我有一个文本区域，需要能够使用 Rows 属性调整大小。我还希望能够调整文本区域内文本的行高。但是，这会导致 在 IE9 和 IE10 中出现滚动条。有没有不涉及 javascript 的解决方法？

这个 JSFiddle 中说明了这个问题:http://jsfiddle.net/JYkAX/6/

这是 html:

<textarea rows="3" class="textbox">No line-height
2
3</textarea>
<div class="separator"></div>
<textarea rows="3" class="textbox2">Lineheight = 20px
2
3</textarea>

这是CSS:

.textbox
{
    overflow: auto;  
}
.textbox2
{
    overflow: auto;
    line-height: 20px;
}
.separator
{
     display: block;
     height: 10px;
}

Answer 1

您的 css 很好，但要使这项工作添加 Jquery:

$(document).ready(function() {

  var textArea = $('textarea'),
      lineHeight = parseFloat(textArea.css('lineHeight'));

  textArea.height(lineHeight * textArea.attr('rows'))

});

这将定义行高及其自动高度。

我知道你没有提到 JS，但当我不得不处理类似的事情时，jquery 是我唯一的解决方案

齐克