title: HTML text field size with IE11 on Windows 8.1
body: <p>I am porting a web application that currently runs in IE6 and IE8, to run in IE11 on Windows 8.1.</p>
  
  <p>The most serious compatibility issue is regarding the size (ie. length) of text fields.  These are typically appearing several mm longer than they do in the older browsers, which throws many page formats out - eg. a three-part date field will overflow onto the next line.</p>
  
  <p>It appears to me that the problem lies with the use of <em>SIZE=n</em> to specify field length in characters. It seems that this is inconsistent between IE8 and IE9 onwards, and it would have been preferable to use <em>STYLE="WIDTH:npx"</em>.  Link: <a href="http://msdn.microsoft.com/en-us/library/ie/ff986079(v=vs.85)" rel="nofollow">http://msdn.microsoft.com/en-us/library/ie/ff986079(v=vs.85)</a></p>
  
  <p>I am trying to find a solution that avoids having to apply this change to potentially hundreds of fields.</p>
  
  <p>I have so far investigated two possible solutions: 
  (1) Remove the "x" (clear button) that IE11 puts in text fields, in case this was causing the size increase. Unfortunately, the recommended solution for this (setting ms-clear) will not work as the browser must run in Compatibility Mode.
  (2) Increase the window size. This helps with some of the fields, but not many, and gives rise to other undesirable screen format issues.</p>
  
  <p>An example of a set of affected fields in HTML, together with the related CSS class definition, is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;TABLE WIDTH="625" BORDER="0"&gt;
  &lt;!-- Column 1 --&gt;&lt;COL WIDTH="100"&gt;
  &lt;!-- Column 2 --&gt;&lt;COL WIDTH="115"&gt;
  &lt;!-- Column 3 --&gt;&lt;COL WIDTH="102"&gt;
  &lt;!-- Column 4 --&gt;&lt;COL WIDTH="93"&gt;
  &lt;!-- Column 5 --&gt;&lt;COL WIDTH="40"&gt;
  &lt;!-- Column 6 --&gt;&lt;COL WIDTH="20"&gt;
  &lt;!-- Column 7 --&gt;&lt;COL WIDTH="137"&gt;
  &lt;TR&gt;
      &lt;TD&gt;Date of Birth:&lt;/TD&gt;
      &lt;TD&gt;&lt;INPUT TYPE="hidden" ID="DateOfBirth" NAME="DateOfBirth" SIZE="10" CLASS="clsText" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"&gt;
                  &lt;INPUT ID="DateOfBirthDay" NAME="DateOfBirthDay" SIZE="2" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="2" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"&gt; /
                  &lt;INPUT ID="DateOfBirthMonth" NAME="DateOfBirthMonth" SIZE="3" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"&gt; /
                  &lt;INPUT ID="DateOfBirthYear" NAME="DateOfBirthYear" SIZE="4" CLASS="clsText" ONBLUR="validateField();" MAXLENGTH="4" ONFOCUS="resetFldFocusFlag()"&gt;&lt;/TD&gt;
      &lt;TD&gt;Age Estimated?
      &lt;INPUT TYPE="checkbox" NAME="AgeEstimated" ID="AgeEstimated" ONCLICK="AgeEstimatedEffects()" SIZE="1" VALUE="Y" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"&gt;&lt;/TD&gt;
      &lt;TD&gt;App. Age or From:&lt;/TD&gt;
      &lt;TD&gt;&lt;INPUT ID="ApparentAge" NAME="ApparentAge" MAXLENGTH="3" SIZE="3" CLASS="clsText" ONBLUR="validateField(); MoveFocusToAgeTo()" ONFOCUS="resetFldFocusFlag()"&gt;&lt;/TD&gt;
      &lt;TD&gt;To:&lt;/TD&gt;
      &lt;TD&gt;&lt;INPUT CLASS="clsText" ID="AgeTo" NAME="AgeTo" SIZE="3" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"&gt;&lt;/TD&gt;
  &lt;/TR&gt;
  &lt;/TABLE&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.clsText
  {
      COLOR: black;
      BACKGROUND-COLOR: white;
      FONT-SIZE: 11px;
      FONT-FAMILY: 'Microsoft Sans Serif';
      TEXT-ALIGN: left;
      TEXT-DECORATION: none
  }
  </code></pre>
  
  <p>All of the above fields defined with <em>CLASS="clsText"</em> are affected by this issue.</p>
  
  <p>Any thoughts would be appreciated.</p>