IE 8 & IE 9 give me the `textarea` of height that is less than requested by `rows` attribute value

internet explorer 8 xp
ie 9
internet explorer 7
internet explorer 8 for windows 7 64-bit
internet explorer 10
internet explorer 8 for mac
internet explorer 11
internet explorer 8 for windows 7 32 bit offline installer

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.

Download Windows Internet Explorer 8 for Windows Server 2003 , Internet Explorer 8. Faster, Easier, More Private, and More Secure. How To Repair Explorer 8 & Protect Your PC By MajorAV. Free Download Now! Follow These 3 Steps, 100% Guaranteed. Download & Secure Your PC Now.

Turned out that line-height: 20px is causing the problem. One way to normalize it across browsers is default line-height: normal but what if I need other value? Thus JavaScript remains only solution it seems. Here's some jQuery code:

<!--[if IE]><script src="ie.js" type="text/javascript"></script><![endif]-->

$(document).ready(function() {

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

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

})

Can I install IE7 and IE8 in Windows 10?, Internet Explorer 8, free and safe download. Internet Explorer 8 latest version: Microsoft gets back on track with a promising web browser. Internet Explorer 8 is​  If you haven’t already, download, install and start using Opera today!

I suppose the style sheet does not actually contain white-space: pre, since that would break the default rendering of textarea (which honors line breaks). Other than that, I don’t see why the problem would appear in Standards Mode.

I’m assuming that the HTML markup (which was not disclosed) contains the </textarea> end tag immediately after the last text line. Otherwise, browsers would imply that there is an empty 16th line in the content. (This browser behavior violates the HTML 4.01 spec which says that a newline immediately before an end tag shall be ignored, but what can you do?) But if this were the problem, it would appear e.g. on Firefox, too.

The setup where the height property of textarea is set to 300 pixels, which equals the number of lines (15) times the line height (20 pixels), is correct.

However, in Quirks Mode, IE misbehaves: it interprets the height attribute value as specifying the height of the total area occupied by the element, including padding and border. The 4px top and bottom padding and the 2px borders would thus require height: 310px. This in turn would cause excessive spacing in conforming browsers. So it’s best to work in Standards Mode. Check whether there is some typo in the doctype string. In IE, you can use F12 to enter Developer Tools, where you can inspect the properties and also see the mode of the browser.

Why You Should Stop Supporting IE10, IE9 and IE8, This time, I spent the day using Internet Explorer 8, which was released ten years ago today, on March 19th, 2009. Who In The World Uses IE8? Internet Explorer 8 is the latest version of the familiar web browser you are most comfortable using, helping you get everything you want from the web faster, easier, more privately and securely than ever before. Faster Internet Explorer 8 is more responsive with new pages and tabs, opening up fast and reliably. You can now get to the

Referring to jibiel's answer (cannot comment yet due to lack of points).

Here's the code for correcting the heights of all textareas that have a row Attribute:

$("textarea[rows]").each( function() {
	$(this).css('height', parseFloat($(this).css('lineHeight')) * $(this).attr('rows') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Download Windows Internet Explorer 8 for Windows Vista or , Microsoft Internet Explorer 8 for XP. View any site with ease. Now you can quickly display websites that were designed for older browsers. Simply press the new  Internet Explorer 8 is a web browser from Microsoft that allows users to easily perform searches and access web pages and services, like Windows Live Spaces. Like many other browsers, IE8 lets users open new windows and tabs easily thanks to its

Internet Explorer 8, Lets downgrade from Internet Explorer 11 to Internet Explorer 8 without even going online. This Duration: 6:03 Posted: Apr 22, 2015 Internet Explorer 8, free and safe download. Internet Explorer 8 latest version: Microsoft gets back on track with a promising web browser. Internet Explorer 8 is Microsoft's incredibly popular web browser.

I Used The Web For A Day On Internet Explorer 8, Microsoft is ending support for most users of Internet Explorer 8, 9, and 10 next week on January 12th, releasing a final patch encouraging  Windows Internet Explorer 8 (IE8) is the eighth version of the Internet Explorer web browser by Microsoft, released on March 19, 2009.It is the successor to Internet Explorer 7, released in 2006, and is the default browser for Windows 7 and Windows Server 2008 R2 operating systems.

Download Microsoft Internet Explorer 8 for XP, It is recommended that COGNOS Users (Report Authors and Report Consumers) who are using. Internet Explorer 8 check and change (if necessary) their IE 8  Download Internet Explorer 8 - A web browser that provides support for a smart filter against malicious activity, accelerators that grant you speed, as well private mode for navigating on the

Comments
  • Do you use any css that might apply to the textarea?
  • @Arjan tons of. Please see my updated question.
  • Found out that line-height: 20px is causing the problem. One way to normalize it across browsers is default line-height: normal but what if I need other value?
  • Why are you using textarea to display text? The element is designed for user input. It was used for creating scrollable areas long, long ago, before CSS became available, but here you aren’t doing even that – you specifically want to avoid scrolling. Using the pre element would make things easier.
  • @JukkaK.Korpela I need those text to be editable.
  • You was right all along. See my answer. I'll accept yours because it was the first. Thanks!