如何停止削減最後一行Textarea在IE中減少行高？

Question

我有文本的多行文字區域：

<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的高度最好由元素的行控制屬性，即：

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

也來自你的風采刪除高度。