How to Stop Clipping of last line of Textarea in IE with a reduced line-height?

[KristenJ]

I have a textarea with multiple lines of text:\[code\]<textarea>this will not clippedthe bottom of this line will be clipped</textarea>\[/code\]And I have CSS to set the line-height of the text to half of the font size:\[code\]textarea { color: #000000; font-size: 50px; line-height: 25px; text-align: center; height: 150px; width: 450px; overflow: hidden;}\[/code\]But when displayed in IE7/IE8/IE9, the last line of the textarea is clipped. I have tried the following:[*]Adding an additional line break after will cause that line to render fine. This causes an overflow which I can't allow in my application.[*]Using a negative margin and a positive padding on bottom. Alternatively using a small height value like 10px and a large padding bottom value like 140px. This renders fine but throws off my measurements of the scrolling height and height of the container. To continue on this option, I'd have to duplicate my controls and float them on top and copy actual user input to the alternate control.[*]Switching the \[code\]textarea\[/code\] to a \[code\]div\[/code\] and setting \[code\]contentEditable="true"\[/code\], managing the user content through HTML (meaning no \n for line breaks but \[code\]<br/>\[/code\] instead).Demo in jsFiddle