如何在线路高度减少的情况下停止在IE中删除Textarea的最后一行？

Question

我有一个包含多行文字的textarea：

<textarea>this will not clipped
the bottom of this line will be clipped</textarea>

我有CSS将文本的行高设置为字体大小的一半：

textarea {
    color: #000000;
    font-size: 50px;
    line-height: 25px;
    text-align: center;
    height: 150px;
    width: 450px;
    overflow: hidden;
}

但是当在IE7 / IE8 / IE9中显示时，textarea的最后一行被剪裁。我尝试过以下方法：

1. 之后添加额外的换行符会使该行呈现正常。这会导致我的应用程序无法允许的溢出。
2. 在底部使用负边距和正边距。或者使用像10px这样的小高度值和像140px这样的大填充底部值。这很好，但抛出了我对容器滚动高度和高度的测量结果。要继续使用此选项，我必须复制我的控件并将它们浮动到顶部并将实际用户输入复制到备用控件。
3. 将textarea切换为div并设置contentEditable="true"，通过HTML管理用户内容（意味着没有\ n表示换行符，而不是<br/>）。
4. 使用JS将textarea的高度切换为“auto”并添加row="5"的属性，但文本仍然被剪切，删除/添加到页面以允许它重新渲染不起作用

Demo in jsFiddle

Answer 1

textarea的高度最好由元素的rows属性控制，即：

<textarea rows="4"></textarea>

同时从你的风格中移除身高。