Currently working on cross-browser compatibility came across the problem with range of IEs.
I need the textarea of such height that it would render given text without scrollings. So I count lines of such text on the server side and on the front-end get:
<textarea rows="15">...</textarea>
So far it works with Chrome, FF & Opera:
But no such luck with IE8:
and IE9:
Is there anyway to fix it besides JS?
Got HTML5 doctype and would like to keep my font-size value untouched.
Computed style of textarea:
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
color: rgb(167, 169, 172);
cursor: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
height: 300px;
letter-spacing: normal;
line-height: 20px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
width: 432.546875px;
word-spacing: 0px;
word-wrap: break-word; # changed to «pre» for IE
writing-mode: lr-tb;
Maybe try calculating what the CSS height would be and add that to the box’s inline style as well.